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

Posted 2023-03-16

【中文标题】在material-ui中嵌套CSS选择器？

【英文标题】：Nesting CSS selectors in material-ui?

【发布时间】：2021-06-15 20:25:53

【问题描述】：

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

任何帮助将不胜感激！

【参考方案1】：

className=`wrapper $this.state.something`

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

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

【讨论】：

这是一个很好的建议，但在我的情况下不起作用，我不想为“文本”元素添加额外的类。如果我有 150 个需要红色的段落怎么办？我必须将课程添加到每个课程中。

那么制作一个段落组件，它有自己的状态，然后用你想要的内容作为传递给元素的道具来渲染每个段落？你甚至可以制作一个道具来切换元素状态是否为新的。