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

我在

useStyles

中有一个名为

listItem

的属性，它是在

todolitItem

之外定义的，如下所示：

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

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

---

在这种情况下，我应该如何将

checked

变量传递到

useStyles

中以使三元运算符工作

您可以将

道具

，

状态

，以及任何您想要的参数传递给样式挂钩

而且它具有更好的可读性，因为我们可以快速了解样式挂钩是否正在使用其他参数

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

---

您可以将

道具

，

状态

，以及任何您想要的参数传递给样式挂钩

而且它具有更好的可读性，因为我们可以快速了解样式挂钩是否正在使用其他参数

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

---

我认为实现它最简单的方法是使用

style

而不是

classname

，并在大样式对象之外操作所有将使用逻辑的东西

---

---

我认为实现它最简单的方法是使用

样式

而不是

类名

，并在大样式对象之外操作所有将使用逻辑的东西

---

---

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

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

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

---

makeStyles

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

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

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

---

我同意直接注入风格属性是最方便的方式！我同意直接注入风格属性是最方便的方式！

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

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