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  ]

React MUI (Google Material UI) component library

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.

 

How to use the MUI library

MUI Core

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.

  1. 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.
  2. 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.
  3. 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.

MUI X

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.

Design kits

Pick your favorite design tool to enjoy and use Material UI components. Boost consistency and facilitate communication when working with developers.

 

Theme colors in MUI

Neutral greys

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>

 

Dimensions in MUI

Code color syntaxe

<typography color="error">
<typography color={theme.primary.main}>
<typography sx={{ textShadow: `0 -1px 5px ${theme.palette.mode === 'light' ? '#0000001F' : '#00000080'}` }}>

Code spacing syntaxe

By default...

  • spacing calculation units are incremented by 8 : theme.spacing(2); // ${8 * 2}px = '16px',
  • spacing units are rem values based on the <body>'s font-size of 16px.
<Box padding={2}>
<Box style={{ padding: theme.spacing(2) }}>
<Box sx={{ padding: '16px' }}>
<Box sx={{ padding: 2 }}>
<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

Icons

MUI icons

import Delete as DeleteIcon from '@mui/icons-material';
export default function SvgMaterialIcons() {
  return (
    <DeleteIcon />
    <IconButton onClick={onClose} titleAccess="Close">
      <DeleteIcon />
    </IconButton>
  );
}

Custom SVG icons <SvgIcon>

  1. Design your vectorial illutration using the InkScape app
  2. Learn how to code your illustration as an SVG file
  3. Learn how to code your SVG file as an MUI SvgIcon component 
<SvgIcon htmlColor={theme.primary[400]} fontSize="small">
  <MyCustomIcon />
</SvgIcon>

MUI Dialogs maxWidth prop dimensions

Gutters (margin) value is always 32px all around.

Vars Max-width dimensions
false 100%
xs 444px
sm 600px
md 900px
lg 1200px
xl 1536px

 

 

My wikis

[ Content edition ][ Web dev & design ][ PHP ][ Wordpress ] md

MartinDube.net

⚠️ **GitHub.com Fallback** ⚠️