如何將道具傳遞給 MUI 樣式的菜單以實現某些條件樣式？

Question

如何將道具傳遞給已經樣式化的 mui 菜單，我希望能夠在菜單上使用條件樣式，因此它可以有 2 種類型的最小寬度。獲取我想要檢查其類型的道具的組件，那么它如何能夠實現這一點？

 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

我最近使用 MUI 的withStyle和makeStyle開發了兩種不同的條件樣式方式

方法#1

制作兩種不同的類樣式並有條件地將它們應用於您的元素

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

方法#2

您可以根據屏幕大小有條件地設置表格單元格（或您選擇的任何元素）的樣式

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

我希望這有幫助！ 快樂編碼！