Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how theme.spacing() is functioning?

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?

like image 855
Prayash Shrestha Avatar asked May 19 '20 08:05

Prayash Shrestha


People also ask

How do you use theme spacing?

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 .

How do you use the theme spacing in material UI?

Use the theme. spacing() helper to create consistent spacing between the elements of your UI. MUI uses a recommended 8px scaling factor by default.

How do you give a margin in material UI?

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.


1 Answers

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/

like image 58
Raven0us Avatar answered Nov 22 '22 19:11

Raven0us