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

Я использую 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, заключается в том, что я хочу использовать шаблон из моей темы или шаблон по умолчанию из пользовательского интерфейса материала. Поэтому я не могу использовать здесь встроенный стиль.

См. также:  Подсказка amCharts отображается только на DateAxis, но не на ValueAxis
Понравилась статья? Поделиться с друзьями:
IT Шеф
Комментарии: 2
  1. Moon

    Почему бы не выбрать имя класса на основе значения successStatus?

    const useStyles = makeStyles((theme) => ({
        successStyle:{
            color: theme.palette.success.main
        },
        errorStyle:{
            color: theme.palette.error.main
        },
    });
    
    <Box>
        {itemArr.map((item, index) => {
            return (
                <Box key={index}>
                    <Typography className={ item.successStatus ? classes.successStyle: classes.errorStyle }>
                        {item.name}
                    </Typography>
                </Box>
            )
        })}
    </Box>
    
  2. Moon

    альтернативное решение

    const useStyles = makeStyles((theme) => ({
        successStyle:{
            color: theme.palette.success.main
        },
        errorStyle:{
            color: theme.palette.error.main
        },
    });
    
    
       <Box>
            {itemArr.map((item, index) => {
                const colorClass = item.successStatus ? classes.successStyle: classes.errorStyle;
                return (
                    <Box key={index}>
                        <Typography className={colorClass}>
                            {item.name}
                        </Typography>
                    </Box>
                )
            })}
        </Box>
    
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: