Sometimes, we want to add padding and margin to all React Material-UI components.

In this article, we’ll look at how to add padding and margin to all React Material-UI components.

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

To add padding and margin to all React Material-UI components, we can use the Box component.

For instance, we write:

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import { Box, Button } from "@material-ui/core";

export default function App() {
  return (
    <div>
      <Box m={2} pt={3}>
        <Button color="default">Your Text</Button>
      </Box>
    </div>
  );
}

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.

As a result, we should see the padding and margin applied.

Conclusion

To add padding and margin to all React Material-UI components, we can use the Box component.