How to add padding and margin to all Material-UI components?

Question

I need to add padding or margin to some of Material-UI components, but could not find an easy way to do it. Can I add these properties to all components? something like this:

<Button color="default" padding={10} margin={5}>

I know that this is possible using pure CSS and classes but I want to do it the Material-UI way.

Answer 1

You can use de "Spacing" in a BOX component just by importing the component first:

import Box from '@material-ui/core/Box';

The Box component works as a "Wrapper" for the component you want to "Modify" the spacing.

then you can use the next properties on the component:

The space utility converts shorthand margin and padding props to margin and padding CSS declarations. The props are named using the format {property}{sides}.

Where property is one of:

m - for classes that set margin p - for classes that set padding

Where sides is one of:

t - for classes that set margin-top or padding-top

b - for classes that set margin-bottom or padding-bottom

l - for classes that set margin-left or padding-left

r - for classes that set margin-right or padding-right

x - for classes that set both *-left and *-right

y - for classes that set both *-top and *-bottom

blank - for classes that set a margin or padding on all 4 sides of the element

as an example:

<Box m={2} pt={3}>
  <Button color="default">
    Your Text
  </Button>
</Box>

Answer 2

Material-UI's styling solution uses JSS at its core. It's a high performance JS to CSS compiler which works at runtime and server-side.

import { withStyles} from '@material-ui/core/styles';

const styles = theme => ({
  buttonPadding: {    
    padding: '30px',   
  },
});

function MyButtonComponent(props) {
  const { classes } = props;

  return (      
      <Button
        variant="contained"
        color="primary"
        className={classes.buttonPadding}
      >
        My Button
      </Button>
  );
}

export default withStyles(styles)(MyButtonComponent);

You can inject styles with withStyle HOC into your component. This is how it works and it's very much optimized.

EDITED: To apply styles across all components you need to use createMuiTheme and wrap your component with MuiThemeprovider

const theme = createMuiTheme({
  overrides: {
    MuiButton: {
      root: {
        margin: "10px",
        padding: "10px"
      }
    }
  }
});

 <MuiThemeProvider theme={theme}>
  <Button variant="contained" color="primary">
    Custom CSS
  </Button>

  <Button variant="contained" color="primary">
    MuiThemeProvider
  </Button>

  <Button variant="contained" color="primary">
    Bootstrap
  </Button>
</MuiThemeProvider>

Answer 3

In Material-UI v5, one can change the button style using the sx props. You can see the margin/padding system properties and its equivalent CSS property here.

<Button sx={{ m: 2 }} variant="contained">
  margin
</Button>
<Button sx={{ p: 2 }} variant="contained">
  padding
</Button>
<Button sx={{ pt: 2 }} variant="contained">
  padding top
</Button>
<Button sx={{ px: 2 }} variant="contained">
  padding left, right
</Button>
<Button sx={{ my: 2 }} variant="contained">
  margin top, bottom
</Button>

The property shorthands like m or p are optional if you want to quickly prototype your component, you can use normal CSS properties if you want your code more readable.

The code below is equivalent to the above but use CSS properties:

<Button sx={{ margin: 2 }} variant="contained">
  margin
</Button>
<Button sx={{ padding: 2 }} variant="contained">
  padding
</Button>
<Button sx={{ paddingTop: 2 }} variant="contained">
  padding top
</Button>
<Button sx={{ paddingLeft: 3, paddingRight: 3 }} variant="contained">
  padding left, right
</Button>
<Button sx={{ marginTop: 2, marginBottom: 2 }} variant="contained">
  margin top, bottom
</Button>

Live Demo