Material-UI theme inspired by Bootstrap Italia.
To add this package to your package.json
run in your terminal:
// with npm
$ npm install @pagopa/mui-italia @mui/material @emotion/react @emotion/styled
// with yarn
$ yarn add @pagopa/mui-italia @mui/material @emotion/react @emotion/styled
/*
** MainApp.js
*/
[...]
/* MUI Core Components */
import { Button } from '@mui/material';
import { ThemeProvider } from "@mui/material";
/* MUI Italia theme */
import { theme } from "@pagopa/mui-italia";
function App() {
return (
<ThemeProvider theme={theme}>
<div className="App">
<Button variant="contained">Hello World</Button>
</div>
</ThemeProvider>
);
}
export default App;
Then, use Material-UI as usual. The theme is just a "wrapper" which overrides the default params like: colors, font-family, padding size, etc etc. Try to avoid custom style, try to use all the standard library + this theme.
This package contain also a specific "color" named "Italia", with a "blu italia palette". To use this color in your component use:
[...]
import { italia } from "@pagopa/mui-italia";
<Box
sx={{
width: 100,
height: 100,
backgroundColor: italia[200],
borderRadius: theme.spacing(3),
}}
></Box>
Here's an explanation of the commands you can find in the package.json
:
prebuild
: Executed automtically before thebuild
command. It removes thedist
folder to get a blank state.build
: It compiles the entire project using the relativetsconfig.json
file. It also resolves all the alias contained in the configuration file.lint
: It checks the entire project to detect syntax errors or inefficient code, using the configuration set in theeslintrc.js
file.storybook
: It launches a local Storybook application using 6006 port.build-storybook
: It outputs a static Storybook in thestorybook-static
folderchromatic
: It checks all the possible differences between snapshots using the Chromatic service. It also publishes an updated version of the Storybook-Chromatic library (see address below). This command is just available to the CI/CD environment because you have to specify the project token to run the command successfully. To get the token value in Chromatic:Manage โ Configure โ Setup Chromatic
If you need to view all the styled and custom components available in this package, check out the (ongoing) MUI Italia Storybook (managed with Chromatic).
Any critiques and suggestions are welcome. If you feel pretty confident, you can open a Pull Request