Material UI is an open-source design framework that showcases different components made in react. It is developed and maintained by Google since 2014.
What is Borders API offered by Material UI?
The Borders API, provided by MUI, allows us to control the border and border-radius of DOM elements that have border utilities. passed to
Borders API props:
- border: It denotes the border CSS property.
- borderTop: It denotes the border-top CSS property.
- borderLeft: It denotes the border-left CSS property.
- borderRight: It denotes the border-right CSS property.
- borderBottom: It denotes the border-bottom CSS property.
- borderColor: It denotes the border-color CSS property.
- borderTopColor: It denotes the border-top-color CSS property.
- borderRightColor: It denotes the border-right-color CSS property.
- borderLeftColor: It denotes the border-left-color CSS property.
- borderBottomColor: It denotes the border-bottom-color CSS property.
- borderRadius: It denotes the border-radius CSS property.
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 Borders API by giving us different borders on different DOM elements. Change your App.js like below:
App.js
import * as React from 'react'; import Box from '@mui/material/Box'; const commonStyles = { bgcolor: 'background.paper', m: 1, borderColor: 'text.primary', width: '5rem', height: '5rem', }; export default function App() { return ( <Box sx={{ display: 'flex', justifyContent: 'center' }}> <Box sx={{ ...commonStyles, border: 1 }} /> <Box sx={{ ...commonStyles, borderTop: 1 }} /> <Box sx={{ ...commonStyles, borderRight: 1 }} /> <Box sx={{ ...commonStyles, borderBottom: 1 }} /> <Box sx={{ ...commonStyles, borderLeft: 1 }} /> </Box> ); } |
Step to run the application:
npm start
Output:
Example 2: Now, let’s give different border colors to the DOM elements using Borders API.
App.js
import * as React from 'react'; import Box from '@mui/material/Box'; const commonStyles = { bgcolor: 'background.paper', m: 1, border: 2, width: '5rem', height: '5rem', }; export default function App() { return ( <Box sx={{ display: 'flex', justifyContent: 'center' }}> <Box sx={{ ...commonStyles, borderColor: 'primary.main' }} /> <Box sx={{ ...commonStyles, borderColor: 'secondary.main' }} /> <Box sx={{ ...commonStyles, borderColor: 'error.main' }} /> <Box sx={{ ...commonStyles, borderColor: 'grey.500' }} /> <Box sx={{ ...commonStyles, borderColor: 'text.primary' }} /> </Box> ); } |
Step to run the application:
npm start
Output:
Reference: https://mui.com/system/borders/
