How to pass props in to MUI styled menu to achieve certain conditional styling?

Question

How to pass props to the already styled mui menu , I want to be able to use conditional styling on the menu so it could have 2 types of minimum width.. depending on each case problem for me is the menu has they style out side of the component that is getting the props that I want to check against its type, so how can it be able to achieve this ?

 const StyledMenu = styled((props: MenuProps) => ( <Menu elevation={0} anchorOrigin={{ vertical: 'bottom', horizontal: 200, }} transformOrigin={{ vertical: 'top', horizontal: 'right', }} {...props} /> ))(({ theme }) => ({ backgroundColor: 'rgba(255, 255, 455, 0.455)', backdropFilter: 'blur(1px)', '& .MuiPaper-root': { borderRadius: 3, //{props === 'Type' ? { minWidth: 1360 } : { minWidth: 250 }}, {props === 'Type' ? { minWidth: 1360 } : { minWidth: 250 }} marginTop: theme.spacing(1), color: theme.palette.mode === 'light' ? 'rgb(55, 65, 81)' : theme.palette.grey[300], boxShadow: 'rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px', '& .MuiMenu-list': { padding: '4px 0', }, '& .MuiMenuItem-root': { '& .MuiSvgIcon-root': { fontSize: 18, color: theme.palette.text.secondary, marginRight: theme.spacing(1.5), }, '&:active': { backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity), }, }, }, })); export const Expandable: React.FC<Props> = ({ source, type, date, icon }) => { const context = useContext(movementsContext); //useEffect(() => {}, [context.StabelItems]); const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null); const open = Boolean(anchorEl); const handleClick = (event: React.MouseEvent<HTMLElement>) => { setAnchorEl(event.currentTarget); }; const handleClose = () => { setAnchorEl(null); }; return ( <Box style={{ margin: 'auto', display: 'flex', justifyContent: 'center' }}> <StyledMenu id='demo-customized-menu' MenuListProps={{ 'aria-labelledby': 'demo-customized-button', }} anchorEl={anchorEl} open={open} onClose={handleClose} > </Box> </Box> ); };

Answer 1

I've recently developed two different ways of conditional styling using MUI's withStyle & makeStyle

Approach #1

Make two different class styles and conditionally apply them to your element

const useStyles = React.makeStyles(theme => ({
    blueStyle: {
        color: 'blue'
    },
    redStyle: {
        color: 'red'
    },
}));

export default const YourComponent = () => {
    const classes = useStyles();
    const [condition, setCondition] = React.useState(true);
    
    return <div className={condition ? classes.blueStyle : classes.redStyle}>Hello World!</div>
}

Approach #2

You can conditionally style a table cell (or any element of your choosing) based on screen size

const StyledTableFirstCellVault = withStyles((theme) => ({
    root: {
        padding: "0px 16px",
        width: "75%",                       // default style of width is 75%
        [theme.breakpoints.up('sm')]: {     // you can use sx, sm, md, lg or xl for different screen conditions
            width: "35%",                   // style of width is 35% if screen size is sm or sx
            // other styles can go here
        },
    }
}))(TableCell);

I hope this helps! Happy Coding!