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/
