React MUI Spacing

Material UI (MUI) is an open-source React component library based on Google’s Material Design. It provides prebuilt components and customization options for building user interfaces. MUI also includes utility classes for managing spacing between components using margin and padding properties.

• Provides reusable React UI components.
• Supports layout and design customization.
• Includes shorthand margin and padding utility classes.
• Helps control spacing without writing extra CSS.

MUI Setup in React:

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

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

To run the React app using npm:

npm 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:

MUI Spacing Utilities

MUI provides shorthand props for CSS margin and padding using m and p. It also supports side-specific props to apply spacing individually or by direction.

The side props are t, b, l, r, x, and y, representing top, bottom, left, right, horizontal, and vertical directions. These can be combined with m and p to control element spacing.

Syntax:

{property}{side}: {value}

where,
property: defines which CSS property to apply like margin, padding.
side: specifies the direction (top, right, bottom, left).
value: sets the size or amount based on a predefined scale like spacing units.

Margin and Padding Shorthand Props

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: Box components can be centered by setting horizontal margins to auto. MUI also allows margin and padding values in standard CSS units like px, em, rem, and %, apart from default numeric values.

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 %

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

Output:

Using theme.spacing():

Another way to add spacing in React MUI is by using the theme.spacing() helper. It maintains consistent spacing across the UI by multiplying the given value with the spacing factor.

By default, MUI uses an 8px spacing factor. It also supports up to four arguments for top, right, bottom, and left spacing, and accepts non-numeric values like 'auto', '4rem', and '20%'.

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: 

Output:

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