material-ui
material-ui copied to clipboard
MUI Alert Slots Missing
Steps to reproduce
Use Mui Alert and attempt to set the backdrop Does not set a backdrop
Current behavior
Currently working with an alert and attempting to set a backdropFilter to blur. Classes only accept strings and I don't want to have to rewrite the entire CSS as I don't know the defaults There is no slotProp for the root component so I can access the SX.
Expected behavior
Should be able to access slotProps for the root to reach it's SX to style.
Context
<Alert
severity="error"
variant="outlined"
sx={{
position: 'absolute',
top: -55,
left: 0,
right: 0,
zIndex: 10,
borderRadius: '10px',
background: 'linear-gradient(135deg, rgba(255,0,0,0.2), rgba(120,0,0,0.3))',
backdropFilter: 'blur(20px)',
}}
iconMapping={{
error: <ErrorOutline fontSize="medium" className="Alert-Icon" />,
}}
>
Your environment
No response
Search keywords: Alert Slots backdropFilter CSS SX Styles