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

Question

У меня есть свойство с именем listItem в useStyles, определенное вне TodoListItem, например:

const useStyles = makeStyles(theme => ({
        listItem: {
            textDecoration: 'none'
        }
    })
)

const TodoListItem({checked}) => {
    const classes = useStyles();
    return <ListItemText className={classes.listItem} primary={text}/>
};

Затем я хотел изменить статус textDecoration на основе переменной с именем checked , И я попытался напрямую использовать переменную checked в useStyles, но она не работает, поскольку она выходит за рамки.

textDecoration: checked ? 'line-through' : 'none'

В этом случае, как мне передать переменную checked в useStyles заставить работать троичного оператора?

Answer 1

CSS свойства в makeStyles поддерживают использование реквизитов компонента для стиля c:

const useStyles = makeStyles(theme => ({
    listItem: {
        textDecoration: props => props.checked ? 'line-through' : 'none'
    }
}));

Answer 2

Я думаю, что самый простой способ добиться этого - использовать style вместо classname и манипулировать всем, что будет использовать logi c вне объекта большого стиля

---

 <ListItemText style={[classes.listItem,{textDecoration: checked ? 'line-through' : 'none'}]} primary={text}/>

Answer 3

Вы можете передать props, state и все, что захотите, в качестве параметра для хука стиля.

И он лучше читается, так как мы можем понять, использует ли хук стиля другие параметры или не быстро.

const useStyles = checked =>
  makeStyles(theme => ({
    listItem: {
      textDecoration: checked ? 'line-through' : 'none'
    }
  }));

const classes = useStyles(checked)();