1

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

任何帮助将不胜感激！

4

1 回答 1

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

我看到你的帖子被标记了reactjs，如果你使用 React，你可以通过它们的状态来动态地应用这些类。

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

于 2021-03-18T12:33:24.490 回答