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

Question

我listItem在useStyles外面定义了一个名为in 的属性，TodoListItem如下所示：

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

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

然后我想textDecoration根据名为 的变量更改状态checked。我尝试直接使用checked变量 inuseStyles但不起作用，因为它超出了范围。

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

在这种情况下，我应该如何将checked变量传递useStyles给三元运算符以使其工作？

Answer 1

makeStyles支持动态样式的自定义道具的CSS 属性：

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

const Component = props => {
    const classes = useStyles({checked: props.checked});
    
    ...
}