solution • React MUI component library - martindubenet/wed-dev-design GitHub Wiki
[ React TypeScript coding ][ React JSX templates ][ React MUI component library ][ Gatsby.React on Netlify ]
mui.com — All components | My wiki about « MUI design system for Figma ».
Do not confuse with Google's Material.io. Material.io as it's own design system « Material 3 Design Kit for Figma » that does not exist as a React component library like MUI does.
React components and utilities, ready-to-use, free forever, and with accessibility always in mind. We've built the foundational UI blocks for your design system so you don't have to.
-
MUI System : MUI System is a set of CSS utilities to help you build custom designs more efficiently using React properties (
prop). It makes it possible to rapidly lay out custom designs. - Base UI : Base UI gives you a set of foundational headless components that you can build with using any styling solution you choose — no need to override any default style engine or theme.
- Material UI : Material UI is an open-source React component library that implements Google's Material Design. It's comprehensive and can be used in production out of the box.
Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, Tree Views, etc.
Pick your favorite design tool to enjoy and use Material UI components. Boost consistency and facilitate communication when working with developers.
- MUI for Figma : A large UI kit with over 600 handcrafted MUI symbols for Figma.
Neutral grey[] color variables are used eveywhere in the native library to render UI components. But instead of hacking the cascade of color variables it is safer (for maintenance) to target those main component colors.
| color var | use it for | code example |
|---|---|---|
| divider | All the borders of the UI elements EXCEPT for the (form) inputs components | <Box sx={{ borderBottom: 1, borderColor: 'divider' }}><Tabs /></Box> |
<typography color="textPrimary">
<typography color={theme.palette.text.primary}>
// ⚠ Note
<typography sx={{ textShadow: `0 -1px 5px ${theme.palette.mode === 'light' ? '#0000001F' : '#00000080'}` }}>
⚠ Note: It is not recommanded to use #hex color values for theming in your component but it is supported. The best practice is to declare color variables in
themes/Light.tsandthemes/Dark.ts.
By default...
-
spacingcalculation units are incremented by 8 :theme.spacing(2); //,${8 * 2}px= '16px' -
spacingunits are rem values based on the<body>'s font-size of16px.
<Box padding={2}>
<Box style={{ padding: theme.spacing(2) }}>
<Box sx={{ padding: 2 }}>
<Box sx={{ padding: '16px' }}>
<Box sx={{ padding: constConditionExample ? 0 : theme.spacing(2) }}>
<Box sx={{ backgroundColor: theme.elevation[1] }}
| spacing | rem | pixels |
|---|---|---|
| 0.5 | 0.25rem | 4px |
| 1 | 0.5rem | 8px |
| 2 | 1rem | 16px |
| 3 | 1.5rem | 24px |
| 4 | 2rem | 32px |
| 5 | 2.5rem | 40px |
| 6 | 3rem | 48px |
| 7 | 3.5rem | 56px |
| 7 | 3.5rem | 56px |
import Delete as DeleteIcon from '@mui/icons-material';
export default function SvgMaterialIcons() {
return (
<DeleteIcon />
<IconButton onClick={onClose} titleAccess="Close">
<DeleteIcon />
</IconButton>
);
}
- Design your vectorial illutration using the InkScape app
- Learn how to code your illustration as an SVG file
- Learn how to code your SVG file as an MUI SvgIcon component
<SvgIcon htmlColor={theme.primary[400]} fontSize="small">
<MyCustomIcon />
</SvgIcon>
The expected usage of the following code is for designing responsive modal windows and columns that will adjust their width when viewed within small mobile device viewports.
In the documentation MUI propose to use breakpoints values on maxWidth prop for setting width on Dialogs but this is not what breakpoints are design for and on the long term can endup on a nightmare to maintain.
Instead, it is safer to create a custom set of variables in themes/BaseThemeOptions.ts. Refer to the existing breakpoints syntaxe and fill my proposed values if you don't where to start from.
| Variables |
breakpoints values |
containersWidth values |
|---|---|---|
xxs |
— | 250 |
xs |
444 |
360 |
sm |
600 |
480 |
md |
900 |
600 |
lg |
1200 |
760 |
xl |
1536 |
1000 |
xxl |
1920 |
1300 |
false |
100% |
100% |
Notes
- Inner gutters (
padding) value is usuallyspacing(4)(32px) all around by default.- Nomenclature to use in your components:
maxWidth: theme.containersWidth.values.sm