Reactjs 嵌套情感10类，用于级联

在之前的《情感9》中，您可以使用情感类名称来利用级联。您可以将情感常量用花括号括起来，并在其前面加上句号，然后加上美元符号。例如，您可以这样做：

const child = css`
  color: green;
`;
const parent = css`
  color: red;
  .${child} {
    color: yellow;
  }
`;

<div className={parent}>I am red</div>
<div className={child}>I am green</div>
<div className={parent}>
  <div className={child}>I am yellow</div>
</div>

const child=css`
颜色：绿色；
`;
const parent=css`
颜色：红色；
.${child}{
颜色：黄色；
}
`;
我是红色的
我是绿色的
我是黄色的

我怎样才能在情感10中实现这种行为？这是我的问题

以下是有关不使用句点美元符号时发生的情况的进一步信息

---

现在，以下内容是可取的：如果情感9或10中没有使用句点，则父常量将继承嵌套的常量样式。而且，如果嵌套常量具有覆盖样式，则这些样式最终将由父级继承

const child = css`
  color: green;
`;
const parent = css`
  color: red;
`;
<div className={parent}>I am red</div>
<div className={child}>I am green</div>

const child = css`
  color: green;
`;
const parent = css`
  ${child}
`;
<div className={parent}>I am green</div>

const child = css`
  color: green;
`;
const parent = css`
  ${child} {
    color: yellow;
  }
`;
<div className={parent}>I am yellow</div>

const child = css`
  color: green;
`;
const parent = css`
  color: red;
  ${child}
`;
<div className={parent}>I am green</div>

const child = css`
  color: green;
`;
const parent = css`
  color: red;
  ${child} {
    color: yellow;
  }
`;
<div className={parent}>I am yellow</div>

const child=css`
颜色：绿色；
`;
const parent=css`
颜色：红色；
`;
我是红色的
我是绿色的
const child=css`
颜色：绿色；
`;
const parent=css`
${child}
`;
我是绿色的
const child=css`
颜色：绿色；
`;
const parent=css`
${child}{
颜色：黄色；
}
`;
我是黄色的
const child=css`
颜色：绿色；
`;
const parent=css`
颜色：红色；
${child}
`;
我是绿色的
const child=css`
颜色：绿色；
`;
const parent=css`
颜色：红色；
${child}{
颜色：黄色；
}
`;
我是黄色的

以下操作可以，但在CodePen中不起作用，因为那里的输出代码上有更多的文本，它会再次散列常量名称。但是，如果您在自己的代码库中进行测试，这是可行的。我不喜欢这样做，踏进物体，把名字放在里面，感觉很不舒服。我想为这些情况提供一些具体的信息

const cat = css`
  color: red;
`;
const dog = css`
  color: green;
  .css-${cat.name} {
    border-bottom: 1px solid currentColor;
  }
`;

---

注意，这不是完全安全的。如果要呈现子组件，它们将不会始终获得相同的哈希类名。此外，似乎情感会将子组件名称附加到哈希类名称的末尾，以避免冲突。因此，请谨慎行事。我真正想要的是让Emotion返回它在V.9中所具有的功能-在他们的V9文档中可以找到一个例子，本页的最后一个例子：