如何引用内部类？答案

【问题标题】：How do I reference an inner class?如何引用内部类？
【发布时间】：2020-09-26 20:42:18
【问题描述】：

我正在使用 Material UI 样式。这是我第一次使用该平台，这将是我最后一次。但现在，我坚持下去。所以我有一个问题。我有类似的东西：

.map(section => (
  <Section className={classNames(classes.section, section.class)}>
    <div className={classes.content}>
    ...
    </div>
  </Section>
))

部分名称通常看起来像 Section1 等。然后我想设置样式，所以我正在尝试这个：

{
  section: {},
  Section1: {
    backgroundColor: 'black',
    '& img': { ... }
    content: { border: '1px solid pink' }
  }
}

但是粉红色的边框没有被应用，我不知道为什么

看起来图像的样式符合预期，我在生成的代码中看到了这一点：

.makeStyles-Section1-415 {
  content: [object Object];
}
.makeStyles-Section1-415 img {
  margin-left: 400px;
}

从中可以看出 MUI 类生成器不知道如何生成内部类名。显然'& .content' 也不起作用，因为生成的实际类名看起来像makeStyles-content-415

那么正确的咒语是什么？

附言

显然我可以做一些令人发指的事情：

{
  Section1Content: {}
}

但如果这是正确的答案，那么它就是彻底淘汰这个样式系统的有力理由

【问题讨论】：

标签： css reactjs material-ui jsx

【解决方案1】：

答案是：

  Section1: {
    '& $content': { border: '1px solid pink' }

【讨论】：