Open In App

React MUI Borders

Improve
Improve
Like Article
Like
Save
Share
Report

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/



Last Updated : 26 Sep, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads