Menu
As per the document in material-ui,it is providing space between the components. But I could get the way it is getting height and width here:
width: theme.spacing(20),
height: theme.spacing(15)
How is theme.spacing() setting the width and height here?
855
When your theme is define, you have a spacing value. By default this value is 8px . So when you call theme. spacing(20) , if the spacing value is 8 it return simply 20 * 8 => 160px .
Use the theme. spacing() helper to create consistent spacing between the elements of your UI. MUI uses a recommended 8px scaling factor by default.
To add padding and margin to all React Material-UI components, we can use the Box component. We use Material UI's Box component to add a container with margin and padding. We set the margin on all sides with the m prop and we set the top padding with the pt prop.
const theme = createMuiTheme({
spacing: 8,
});
When your theme is define, you have a spacing value. By default this value is 8px. So when you call theme.spacing(20), if the spacing value is 8 it return simply 20 * 8 => 160px.
Source : https://material-ui.com/customization/spacing/
58
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
