score:12
below are the default styles for backdrop
:
export const styles = {
/* styles applied to the root element. */
root: {
// improve scrollable dialog support.
zindex: -1,
position: 'fixed',
display: 'flex',
alignitems: 'center',
justifycontent: 'center',
right: 0,
bottom: 0,
top: 0,
left: 0,
backgroundcolor: 'rgba(0, 0, 0, 0.5)',
webkittaphighlightcolor: 'transparent',
},
/* styles applied to the root element if `invisible={true}`. */
invisible: {
backgroundcolor: 'transparent',
},
};
you can see that the approach it uses for covering the whole screen is to use right
, bottom
, top
, and left
of zero along with a position
of fixed
. by changing the position
to absolute
, it will instead cover its closest positioned ancestor. this means that you will want to change the containing paper
to have a position of relative
(unless it already had a position of absolute
). you also need to adjust the z-index of the backdrop, since it defaults to -1 which will put it behind other things in the current stacking context (such as the paper it is contained within).
below is a working example:
import react from "react";
import cssbaseline from "@material-ui/core/cssbaseline";
import paper from "@material-ui/core/paper";
import { withstyles } from "@material-ui/core/styles";
import grid from "@material-ui/core/grid";
import backdrop from "@material-ui/core/backdrop";
import button from "@material-ui/core/button";
const styledpaper = withstyles({
root: {
height: 200,
position: "relative"
}
})(paper);
const limitedbackdrop = withstyles({
root: {
position: "absolute",
zindex: 1
}
})(backdrop);
export default function app() {
const [showbackdrop, setshowbackdrop] = react.usestate(false);
return (
<div>
<cssbaseline />
<grid container spacing={2}>
<grid item xs={6}>
<styledpaper>
<limitedbackdrop open={showbackdrop}>
<button onclick={e => setshowbackdrop(!showbackdrop)}>
hide backdrop
</button>
</limitedbackdrop>
<div>
paper 1<br />
{!showbackdrop && (
<button onclick={e => setshowbackdrop(!showbackdrop)}>
show backdrop
</button>
)}
</div>
</styledpaper>
</grid>
<grid item xs={6}>
<styledpaper>paper 2</styledpaper>
</grid>
</grid>
</div>
);
}
Source: stackoverflow.com
Related Query
- How to add Backdrop that overlays single component such as Paper rather than entire screen
- How to add more than one Outlet component react router dom V6?
- why add ref to child ref can only get a component instance rather than a DOM node?
- How to create a decorator that adds a single function to the component class?
- How to use react as a component library rather than application
- How to use the useHook in the component rather than passing the value returned from it as a prop to the components using react and typescript?
- React: how can I add states that are objects into a single array and access it?
- How to deal with a value that might be an array, or might be only a single item react component
- How to add a route that will render a component using react-router-dom?
- How to change class when component is not equal to home than add class in header component in react.js?
- How to redirect to a url along with a component in react such that props passed to the component are not lost
- How do you add an keyup event listener to window in a React functional component that only gets added when the app originally loads?
- How would this React code look without React-hooks and with class components rather than functional components?(Button that open an additional window)
- In ReactJs, How to Passing or retrieving state of a component into another such that both components are part of third component to divide the actions
- How to add CSS new 'content-visibility' property to a React class component that uses Typescript and SCSS?
- Use bootstrap's CSS for single react-bootstrap component rather than across the whole project
- How do I add css variable into a reactJS component that is written with es6?
- How do I add styles to a component that is passed as prop in React?
- How to listen for click events that are outside of a component
- How to test a react component that is dependent on useContext hook?
- How do I use external script that I add to react JS?
- How do I wrap a React component that returns multiple table rows and avoid the "<tr> cannot appear as a child of <div>" error?
- How do I test that a child component is rendered?
- How do react hooks determine the component that they are for?
- How to submit form from a button outside that component in React?
- How do I export more than one class component with React JS?
- How to add scroll event in react component
- How can I add properties to a react component passed as a variable?
- Jest/Enzyme Unit Testing: How to pass store to shallow component that uses redux 4 and react-redux 6 connect function
- How do you mock a react component with Jest that has props?
More Query from same tag
- React keyboard Event not firing when modal opens
- Is there a way to access a value computed using props in componentDidMount?
- React: How to return value from method of Context
- DeprecationWarning: Compilation.assets will be frozen in future, all modifications are deprecated
- Webpack Dev Server Not Watching or Updating Files
- How to have right to left direction in react-bootstrap?
- How can you add to cart only if matching product id?
- How to save large data in local using reactJs?
- Nested CSSTransitions inside another CSSTransition?
- React upload csv file to S3 using react-aws-s3
- How to map inside map function and show the data in Reactjs
- List missing from reactstrap
- MUI: how to position AppBar on left
- React - How do I make an element disappear after animation ends?
- Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `SocialMenu`. (React.js in a Meteor.js app)
- How can I add a scroll to top animation to each closed accordion tab in React?
- prevent TextField that are dynamic in nature from getting autofilled
- ReactJS dynamically call custom class
- Extending typescript type with default react view properties
- 403 Forbidden Error when trying to post and put a axios request in a web app using Django and React
- how to map an array of objects of array of objects with React
- How to fit map to full screen?
- React video rendering
- How to update value of JSON Object in ReactJS
- React Custom Component Styling
- Set camera angle react-three-fiber
- How to register conversion to Google Adwords in ReactJS with react-ga?
- ReactJS: Data Transformation with JSX
- Input value is changed after moving to another tab react js hooks
- Reactjs Rest API response decode JSON