尝试使用材质 UI 为具有特定自定义类的项目设置样式

Question

我正在尝试使用材质 ui 表管理音乐播放列表。我想改变我目前正在玩的项目的外观。起初我只是将其设置为“选定”，但现在，我有自定义主题，我不知道应该覆盖什么以使“选定”外观与我的播放列表的主题保持一致。因此，相反，我更愿意在“正在播放”的行中添加一个类，然后根据它所具有的类对我的项目进行不同的样式设置。

我没有找到任何可行的方法。当我尝试将自定义类添加到主题中时，出现此错误：

mergeClasses.js:25 Material-UI: The key `&.playing` provided to the classes prop is not implemented in ForwardRef(TableCell).
You can only override one of the following: root,head,body,footer,sizeSmall,paddingCheckbox,paddingNone,alignLeft,alignCenter,alignRight,alignJustify,stickyHeader.

所以，我想我试图做的事情一定不能像我试图做的那样做。我试过这个：

const StyledTableCell = withStyles((theme) => ({
  root: {
    borderColor: theme.root.borderColor,
  },
  head: {
    backgroundColor: theme.palette.background.default,
    color: theme.palette.common.white,
  },
  body: {
    fontSize: 14,
  },
  "&.playing": { backgroundColor: "rgba(0, 0, 0, 0.16)" },
}))(TableCell);

如何在材质 ui 中为自定义类添加特定的渲染规则？

Answer 1

&.playing 应该在 root 内部以应用于根元素。

const StyledTableCell = withStyles((theme) => ({
  root: {
    '&.playing': {
      backgroundColor: '#ccc',
    }
  },
}))(TableCell);