React MUI Sizing

Material-UI is a user interface framework that provides pre-defined and customizable React components for faster and easy web development. The Material-UI components are based on top of Material Design by Google. In this article let’s discuss the Sizing API in the Material-UI library.

MUI Sizing: The Sizing API provided by MUI allows us to control the height and width of the DOM elements.

MUI Sizing API supported values: The sizing style utility supported properties are – width, maxWidth, minWidth, height, maxHeight, and minHeight. Utilize the below-mentioned custom function for applying the CSS to the DOM elements.

Syntax:

function transform(value) {
  return value <= 1 && value !== 0 ? `${value * 100}%` : value;
}

Sizing API props:

Import Name	Prop	CSS Property	Description	Theme Key
width	width	width	It denotes the width CSS property	none
maxWidth	maxWidth	max-width	It denotes the max-width CSS property	theme.breakpoints.values
minWidth	minWidth	min-width	It denotes the min-width CSS property	none
height	height	height	It denotes the height CSS property	none
maxHeight	maxHeight	max-height	It denotes the max-height CSS property	none
minHeight	minHeight	min-height	It denotes the min-height CSS property	none
boxSizing	boxSizing	box-sizing	It denotes the box-sizing CSS property	none

Creating React Application And Installing Module

Step 1: Create a React application using the following command:

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command:

cd foldername

Step 3: After creating the ReactJS application, Install the required module using the following command:

npm install @mui/material
npm install @mui/system

Project Structure:  It will look like the following.

Example 1: Now, let’s create a simple application that utilizes the Sizing API by giving different widths of different DOM elements. Change your App.js like below:

App.js

import * as React from 'react';
import Box from '@mui/material/Box';

export default function App() {
    return (
        <Box sx={{ width: '100%' }}>
            <Box
                sx={{
                    width: 1 / 4,
                    bgcolor: 'grey.200',
                    border: '1px solid',
                    fontSize: '14px',
                    fontWeight: 'bold',
                }}
            >
                Width 1/4
            </Box>
            <Box
                sx={{
                    width: 300,
                    bgcolor: 'grey.200',
                    border: '1px solid',
                    fontSize: '14px',
                    fontWeight: 'bold',
                }}
            >
                Width 300
            </Box>
            <Box
                sx={{
                    width: '75%',
                    bgcolor: 'grey.200',
                    border: '1px solid',
                    fontSize: '14px',
                    fontWeight: 'bold',
                }}
            >
                Width 75%
            </Box>
            <Box
                sx={{
                    width: 1,
                    bgcolor: 'grey.200',
                    border: '1px solid',
                    fontSize: '14px',
                    fontWeight: 'bold',
                }}
            >
                Width 1
            </Box>
        </Box>
    );
}

Step to run the application: Open the terminal and type the following command.

npm start

Output:

Example 2: Now,  let’s give different heights to different DOM elements using the Sizing API. Change your App.js like below:

App.js

import * as React from 'react';
import Box from '@mui/material/Box';

export default function App() {
    return (
        <Box sx={{ width: '100%', height: 100 }}>
            <Box
                sx={{
                    height: '25%',
                    width: 100,
                    bgcolor: 'grey.200',
                    border: '1px solid',
                    fontSize: '14px',
                    fontWeight: 'bold',
                }}
            >
                Height 25%
            </Box>
            <Box
                sx={{
                    height: '50%',
                    width: 100,
                    bgcolor: 'grey.200',
                    border: '1px solid',
                    fontSize: '14px',
                    fontWeight: 'bold',
                }}
            >
                Height 50%
            </Box>
            <Box
                sx={{
                    height: '75%',
                    width: 100,
                    bgcolor: 'grey.200',
                    border: '1px solid',
                    fontSize: '14px',
                    fontWeight: 'bold',
                }}
            >
                Height 75%
            </Box>
            <Box
                sx={{
                    height: '100%',
                    width: 100,
                    bgcolor: 'grey.200',
                    border: '1px solid',
                    fontSize: '14px',
                    fontWeight: 'bold',
                }}
            >
                Height 100%
            </Box>
        </Box>
    );
}

Steps to run the application: Open the terminal and type the following command.

npm start

Output:

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