How to make mui backdrop inside div in react js?
September 17, 2023Hi Friends 👋,
Welcome To aGuideHub!
To make mui backdrop inside div in react js, you have to put backdrop element into div element. it will make mui backdrop inside div in React JS.
Today, I am going to show you, How to make mui backdrop inside div in react js
Installation
Install the following packages to use mui backdrop in react js.
npm
npm install @material-ui/coreyarn
yarn add @material-ui/coreTable of contents
- Install MUI and create a new React app.
- Import Material-UI backdrop.
- Use the backdrop Component
Step 1: Install MUI and create a new React app.
First you have to install the React project. You should use create-react-app command to create a new React project.
npx create-react-app my-app
cd my-app
npm startStep 2: Import Material-UI backdrop.
After installing MUI, you have to import your React component. To do this, add the following line to the top of your component file.
import React from "react";
import Backdrop from "@material-ui/core/Backdrop";
import CircularProgress from "@material-ui/core/CircularProgress";
import Button from "@material-ui/core/Button";
import { makeStyles, createStyles, Theme } from "@material-ui/core/styles";Step 3: Use the backdrop Component.
The Backdrop signals a state change within the application and can be used for creating loaders, dialogs, and more. In its simplest form, the Backdrop component will add a dimmed layer over your application.
<Backdrop className={classes.root} open={open} onClick={handleClose}>
<CircularProgress color="inherit" />
</Backdrop>MUI material make mui backdrop inside div example.
The below code is an example, you need to import Backdrop Component. Then, you can create a backdrop and you can use <div> element. Then it will make mui backdrop inside div in react js.
App.js
import React from "react";
import Backdrop from "@material-ui/core/Backdrop";
import CircularProgress from "@material-ui/core/CircularProgress";
import Button from "@material-ui/core/Button";
import { makeStyles, createStyles, Theme } from "@material-ui/core/styles";
const useStyles = makeStyles((theme: Theme) =>
createStyles({
root: {
color: "green",
backgroundColor: "rgb(240,230,0,0.5)",
position: "absolute",
zIndex: theme.zIndex.drawer - 1,
opacity: 0.5
}
})
);
export default function SimpleBackdrop() {
const classes = useStyles();
const [open, setOpen] = React.useState(false);
const handleClose = () => {
setOpen(false);
};
const handleToggle = () => {
setOpen(!open);
};
return (
<div>
<Button variant="outlined" color="primary" onClick={handleToggle}>
Show backdrop
</Button>
<div
style={{
border: "1px solid black",
position: "relative"
}}
>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum
</div>
<Backdrop className={classes.root} open={open} onClick={handleClose}>
<CircularProgress color="inherit" />
</Backdrop>
</div>
</div>
);
}In the above code example, I have used the @mui/material component and made mui backdrop inside div in react js.
Check the output of the above code example.
Here, we are provided code sandbox links for the above program make mui backdrop inside div in react js. Then you can use whenever you want and do the changes as per your requirements.
All the best 👍
