在material-ui中嵌套CSS选择器？

Question

我不知道如何使用 material-ui 中的 makeStyles 在 CSS 中做最简单的事情。

想象一下这个超级简单的例子：

<div classNames={clsx(wrapper, post.new && classes.new)}>
  <p classNames={text}>Post</p>
  <p> Something else </p>
</div>

样式也很简单：

const useStyles = makeStyles({
  wrapper: {
    // styles
  },
  text: {
    // styles
  },
  new: { 
    text: { 
      color: 'red', // this does not work, why? :[
    } 
  }
});

您现在可能已经猜到这里的问题是什么了。我希望包装器有时具有new 类，当它发生时text 会变红。而已。我完全不知道该怎么做。

我知道有'& .something'，但这看起来是个不好的方法，我什至不知道文本的确切类名，因为类是乱码（makeStyles-text-somerandomnumber）。我不想将 .new 类添加到需要额外样式的所有内容中，如果我有多个需要不同样式的段落怎么办？无法维持。我想我一定是错过了什么，它是如此微不足道，但是，不知道该怎么做！

任何帮助将不胜感激！

Answer 1

className={`wrapper ${this.state.something}`}

我看到你的帖子被标记为reactjs，如果你使用 React，你可以根据类的状态动态应用它们。

不要忘记模板文字的反引号。