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

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>