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

user_15357136 0
Viewed 855

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>
  );
};

material-ui reactjs
1 Answers

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 StyledDiv = withStyles((theme) => ({
    root: {
        color: 'blue',                      // default style of color is blue
        [theme.breakpoints.up('sm')]: {     // you can use sx, sm, md, lg or xl for different screen conditions
            color: 'red',                   // style of color is red if screen size is sm or sx
            // other styles can go here
        },
    }
}))(div);

export default const YourComponent = () => {
    
    return <StyledDiv >Hello World!</StyledDiv>
}
user_82452180
Related