how theme.spacing() is functioning?

Viewed 12311

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?

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/

Related