score:1
if you'd like to style the backdrop, your styles must be passed to the modal
component directly:
for example:
const usestyles = makestyles((theme) => ({
/** changed modalstyle */
modalstyle: { backgroundcolor: "rgba(255, 0, 0, 0.5)" },
/** moved content styling to new class */
contentstyle: {
/** also removed some invalid attributes **/
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
width: "300px",
backgroundcolor: "white",
borderradius: "10px"
}
}));
const popupmodal = ({ postmodalopen, handleclose, children }) => {
const classes = usestyles();
return (
// note the changed classname props with your sample code
<modal
open={postmodalopen}
onclose={handleclose}
classname={classes.modalstyle}
>
<box classname={classes.contentstyle}>
<typography
id="modal-modal-title"
variant="h6"
component="h2"
style={{
fontsize: "14px",
marginleft: "5px"
}}
>
{children}
</typography>
</box>
</modal>
);
};
working example: https://codesandbox.io/s/material-demo-forked-edhqx?file=/demo.js
fyi: you can also override all backdrops in your application, on a global scale, by passing a muibackdrop
override object to createmuitheme()
.
score:1
this is how i customized my mui backdrop (mui v5)
<backdrop open={isopen} sx={{ backgroundcolor: 'rgba(0, 0, 0, 0.25)', zindex: 1 }} onclick={handleclo u} />
Source: stackoverflow.com
Related Query
- How can style the backdrop of a MaterialUI modal?
- Material UI style How do I remove the outline(s) from the modal backdrop in the image below
- MUI - How can I style the scrollbar with CSS in JS?
- How can I override the style of the Material-UI switch component when checked?
- How can I customize the style of a React component shared between lazy-loaded pages?
- How to change The style of a reactstrap modal in react?
- How can I style the arrow of react select component?
- How can I update the style of a styled-component based on scroll position without re-rendering an array of randomly placed sibling components?
- How can I add style to the body element with JSS?
- How can I set the value of my MaterialUI TextField to uppercase?
- How should I style the cards so that I can have 3 cards per row?
- How can I modify the default css / style of the auth buttons that firebase provides me?
- How can i give style to the ul inside the pagination
- How can I close a Material UI Modal using an X icon rather than just by clicking outside the modal?
- How can I open the modal when I click the delete button?
- How can I customize the style of a checkbox which is in indeterminate state?
- I am trying to animate an object with css in react and change the animation (timing) dynamically, how can I set the style after animation end?
- How can i add style to the root of React's CreatableSelect?
- How do I change the style of an element through another element selector with withStyle from materialUI
- How can I change the style of a parent component?
- How can I change the style of specific components returned from map function?
- How can I render the same modal component into a list array itens in React?
- How can I set up a react modal to open from anywhere in the app?
- How can I change the style after mapping the array with js?
- How can I use the varible inside array map to control style on Material UI?
- How can I thicken the underline on a MaterialUI <Link>?
- How can I dynamically display what appears in the modal
- How can you show a modal in react when you press the back button browser?
- How can I prevent the MaterialUI Switch from animating?
- After closing Materialize CSS Modal the "modal-overlay" remains - How can we close it without touching the overlay?
More Query from same tag
- http-proxy-middleware does't catch request from react app to API
- How to change values in a div created dinamically in React
- React - Decorating Children and Handling Keys
- ReactJS: How to synchronize sessionStorage state between components
- Upload image using formdata in react-native
- Better way to require.extensions with Node.js
- MUI Custom Text Field loses focus on state change
- how do you use useParams correctly to display data
- Adding react-lds import in react component resulting in failed compilation
- API Handling with conditions?
- Checkout flow: how should I process a new order?
- JSON Parse nested objects in React
- ReactJS - Call One Component Method From Another Component
- How to properly Map and Search json records returns by API using reactjs
- Can't perform a React state update on an unmounted component when adding componentDidUpdate
- extends React.Component vs extends Component
- How can I simplify retrieval of corresponding foreign key objects
- Deleting Objects in State While Rendering State in Reverse
- How to convert a React Fragment to an Array?
- Programmatically select an item in Dropdown in Semantic-UI-React
- ConnectedRouter TypeError: Cannot read property 'dispatch' of undefined
- ReactJS+FireStore Data mapping issue
- How does @withViewPort decorator work in React?
- Axios instance in React hook "Cannot read property 'get' of undefined"
- React.Js not rendering in django project
- How to Route without reloading the whole page?
- Unable to set httpOnly cookie between Heroku and Netlify + cloudflare
- How to handle multiple errors in promise chain?
- Debouncing with multiple hooks
- Update Boolean Within UseState Hook