如何在Material UI中动态更改对象中的属性值？

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

您可以将props作为参数传递给样式钩子

import { makeStyles } from "@material-ui/core/styles";
const useStyles = props =>
  makeStyles(theme => ({
    listItem: {
      textDecoration: props.checked ? 'line-through' : 'none'
    }
  }));

const classes = useStyles(props)();