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.
