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

问题描述

我不知道如何使用 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 类添加到需要额外样式的所有内容中，如果我有多个段落需要不同的样式怎么办？无法维护。我想我一定遗漏了一些东西，它是如此微不足道，但是，不知道该怎么做！

任何帮助将不胜感激！

解决方法

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

我看到您的帖子标有 reactjs，如果您使用 React，您可以根据类的状态动态应用这些类。

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