React MUI Spacing

Material UI (MUI) is a comprehensive collection of prebuilt components that are ready for use in production right out of the box. It is beautiful by design and features a suite of customization options that make it easy to implement your own custom design system. It is an open-source React component library that implements Google's Material Design. In this tutorial, we will be learning how to add spacing between your components using components from MUI.

MUI provides a wide range of shorthand responsive margin and padding utility classes to modify an element's appearance. Follow the below steps to create a new React app and then install MUI package to be able to use its components in our app:

Steps to create a new React app:

Step 1: Type in the following command to create a new React app:

npx create-react-app mui-spacing

Project File Structure: Following is the file structure of the project. All the code will be written in the App.js file:

Step 2: Now move into the directory created and type the following command to install MUI's source files into the React app:

Step 3: To install MUI package using npm:

npm install @material-ui/core

To install MUI package using yarn:

yarn add @material-ui/core

Step 4: Run the react app by typing the command in root of the directory:

To run the React app using npm:

npm start

To run the React app using yarn:

yarn start

Spacing in React MUI: The space utility converts shorthand margin and padding props to margin and padding CSS declarations. Following is the list of the shorthand properties for the property type and side provided by MUI:

The space utility in MUI provides shorthand margin and padding props for the margin and padding properties of CSS. It also provides shorthand props for sides of the container element which helps to set the margin or padding of the element individually for a single side, for a particular direction, or for all sides. The props used for margin and padding properties are m and p respectively while the props for sides are t, b, l, r, x, and y which represent the top, bottom, left, right, horizontal direction, and vertical direction respectively. A combination of margin and padding prop along with a side prop is used to define the spacing relating to the element.

Syntax: {property}{side}: {value}

Refer to the below table for a detailed overview of the margin and padding property combinations along with their sides:

Table for margin properties:

Table for padding properties:

Example:

m  // Specifying margin on all sides
pt  // Specifying padding-top
ml  // Specifying margin-left
py  // Specifying padding-top and padding-bottom

Note: The box components can also be centered by setting the margin in the horizontal direction to auto. Moreover, not only use the default numerical values for margin and padding provided by MUI, but we can also specify the margin and padding value in standard CSS units such as px, em, rem, or percentage(%). See the following examples for a better understanding:

Example:

m:4  // Sets margin 4 from all sides
pt:2  // Sets padding-top to the value 2
mx:'auto' // Centering element in the horizontal direction
p:'30px' // Setting the padding in px from all 4 sides
ml:'10%' // Setting margin-left in %

Given Below is an example explaining how to specify the values of margin and padding properties using different units available in MUI:

import Box from "@mui/material/Box";

const App = () => {
    return (
        <div>
            <Box
                sx={{
                    bgcolor: "primary.main",
                    fontWeight: 700,
                    height: "150px",
                    width: "150px",
                    borderRadius: 2,
                    fontSize: "1.3rem",
                    pt: 10,
                }}
            >
                Setting padding top using MUI units
            </Box>
            <Box
                sx={{
                    bgcolor: "error.main",
                    fontWeight: 700,
                    height: "150px",
                    width: "150px",
                    borderRadius: 2,
                    fontSize: "1.3rem",
                    m: "50px",
                }}
            >
                Setting margin in px
            </Box>
            <Box
                sx={{
                    bgcolor: "warning.main",
                    fontWeight: 700,
                    height: "150px",
                    width: "150px",
                    borderRadius: 2,
                    fontSize: "1.3rem",
                    px: "15%",
                }}
            >
                Setting padding-x in %
            </Box>
            <Box
                sx={{
                    bgcolor: "success.main",
                    fontWeight: 700,
                    height: "150px",
                    width: "150px",
                    borderRadius: 2,
                    fontSize: "1.3rem",
                    mx: "auto",
                }}
            >
                Centering the Box horizontally
            </Box>
        </div>
    );
};

export default App;

Output:

Using theme.spacing(): Another way to space components in a React app is to use the theme.spacing() helper. This method helps the user to maintain a uniform spacing all over the UI by specifying a spacing factor and then the value to be multiplied by the factor, the final output will be the product of the spacing factor and the value. The default spacing factor used by MUI is '8px'.

Also, the theme.spacing() helper can be provided by 4 different arguments specifying the values for different sides i.e top, left, bottom, and right in order. Values other than numeric can also be passed. For example: 'auto', '4rem', '20%' .etc.

Example: Given below is an example demonstrating the use of the theme.spacing() helper. It demonstrates how to pass values, multiple values for different sides and values in the form of strings: 

import Box from "@mui/material/Box";
import { ThemeProvider, createTheme } from "@mui/material/styles";

const theme = createTheme({
    spacing: 8, // Spacing factor
});

const App = () => {
    return (
        <div>
            <ThemeProvider theme={theme}>
                {/* Passing multiple values as arguments for
                 top, right, bottom, left sides in order */}
                <Box
                    sx={{
                        bgcolor: "error.main",
                        fontWeight: 700,
                        height: "150px",
                        width: "150px",
                        borderRadius: 2,
                        fontSize: "1.3rem",
                        m: theme.spacing(10, 8, 6, 4), 
                    }}
                >
                    This is box 1.
                </Box>

                {/* Spacing using the theme.spacing()
                helper */}
                <Box
                    sx={{
                        bgcolor: "primary.main",
                        fontWeight: 700,
                        height: "150px",
                        width: "150px",
                        borderRadius: 2,
                        fontSize: "1.3rem",
                        p: theme.spacing(4), 
                    }}
                >
                    This is box 2.
                </Box>

                {/* Passing values in form of 
                 strings as arguments */}
                <Box
                    sx={{
                        bgcolor: "warning.main",
                        fontWeight: 700,
                        height: "150px",
                        width: "150px",
                        borderRadius: 2,
                        fontSize: "1.3rem",
                        m: theme.spacing("5%", "auto"), 
                    }}
                >
                    This is box 3.
                </Box>
            </ThemeProvider>
        </div>
    );
};

export default App;

Output:

Reference: https://mui.com/system/spacing/