Как я могу использовать изменяемую карту внутреннего массива для управления стилем в пользовательском интерфейсе материала?

Я использую Materil UI 4.11. Мы знаем, что с Material UI, если мы хотим использовать переменную внутри настройки стиля, мы можем сделать это следующим образом:

const useStyles = makeStyles((theme) => ({ testStyle: { width: ({ ElementWidth }) => `${ElementWidth * 100}%`, } })

а внутри компонента мы устанавливаем переменную и вызываем класс:

const styleProps = { ElementWidth, } const classes = useStyles(styleProps) <Box className={classes.testStyle}> element </Box>

Мой вопрос: если я хочу использовать переменную внутри одной карты массива, как я могу ее установить? Массив выглядит так:

const itemArr = [ {name:»a»,successStatus:true,}, {name:»b»,successStatus:false}, {name:»c»,successStatus:true}, ]

компонент:

<Box> {itemArr.map((item, index) => { return ( <Box key={index}> <Typography className={classes.successStatusStyle}> {item.name} </Typography> </Box> ) })} </Box>

Что я хочу установить в классе, так это то, что цвет будет отличаться в зависимости от значения item.successStatus:

const useStyles = makeStyles((theme) => ({ successStatusStyle:{ color: ({ successStatus }) => successStatus ? theme.palette.success.main : theme.palette.error.main } })

Как передать item.successStatus в useStyles, чтобы каждый элемент имел динамический цвет на основе successStatus?

Я знаю, что с помощью встроенного стиля я могу изменить цвет, например style={{ color: successStatus ? «green» : «blue» }}, но причина, по которой я хочу установить его внутри useStyles, заключается в том, что я хочу использовать шаблон из моей темы или шаблон по умолчанию из пользовательского интерфейса материала. Поэтому я не могу использовать здесь встроенный стиль.

Источник: ledsshop.ru

Стиль жизни - Здоровье!