#reactjs #material-ui
Вопрос:
Как передать реквизиты в уже оформленное меню mui , я хочу иметь возможность использовать условный стиль в меню, чтобы оно могло иметь 2 типа минимальной ширины.. в зависимости от каждого случая для меня проблема заключается в том, что меню имеет стиль со стороны компонента, который получает реквизиты, которые я хочу сверить с его типом, так как он может этого достичь ?
const StyledMenu = styled((props: MenuProps) =gt; ( lt;Menu elevation={0} anchorOrigin={{ vertical: 'bottom', horizontal: 200, }} transformOrigin={{ vertical: 'top', horizontal: 'right', }} {...props} /gt; ))(({ theme }) =gt; ({ backgroundColor: 'rgba(255, 255, 455, 0.455)', backdropFilter: 'blur(1px)', 'amp; .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', 'amp; .MuiMenu-list': { padding: '4px 0', }, 'amp; .MuiMenuItem-root': { 'amp; .MuiSvgIcon-root': { fontSize: 18, color: theme.palette.text.secondary, marginRight: theme.spacing(1.5), }, 'amp;:active': { backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity), }, }, }, })); export const Expandable: React.FClt;Propsgt; = ({ source, type, date, icon }) =gt; { const context = useContext(movementsContext); //useEffect(() =gt; {}, [context.StabelItems]); const [anchorEl, setAnchorEl] = React.useStatelt;null | HTMLElementgt;(null); const open = Boolean(anchorEl); const handleClick = (event: React.MouseEventlt;HTMLElementgt;) =gt; { setAnchorEl(event.currentTarget); }; const handleClose = () =gt; { setAnchorEl(null); }; return ( lt;Box style={{ margin: 'auto', display: 'flex', justifyContent: 'center' }}gt; lt;StyledMenu id='demo-customized-menu' MenuListProps={{ 'aria-labelledby': 'demo-customized-button', }} anchorEl={anchorEl} open={open} onClose={handleClose} gt; lt;/Boxgt; lt;/Boxgt; ); }; Ответ №1:
Недавно я разработал два разных способа условного стиля, используя MUI withStyle и makeStyle
Подход № 1
Создайте два разных стиля класса и условно примените их к своему элементу
const useStyles = React.makeStyles(theme =gt; ({ blueStyle: { color: 'blue' }, redStyle: { color: 'red' }, })); export default const YourComponent = () =gt; { const classes = useStyles(); const [condition, setCondition] = React.useState(true); return lt;div className={condition ? classes.blueStyle : classes.redStyle}gt;Hello World!lt;/divgt; } Подход № 2
Вы можете условно оформить ячейку таблицы (или любой элемент по вашему выбору) в зависимости от размера экрана
const StyledDiv = withStyles((theme) =gt; ({ 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 = () =gt; { return lt;StyledDiv gt;Hello World!lt;/StyledDivgt; }