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?
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/
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