reactjs - 嵌套Emotion 10类以进行级联

以前在Emotion 9中，您可以使用Emotion类名来利用层叠。您可以将情感const用大括号括起来，并在其前面加上句号，然后加上美元符号。例如，您可以这样做：

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>

如何在Emotion 10中实现这种行为？那是我的问题。

以下是有关不使用句点美元符号时会发生什么的更多信息。



现在，以下是并且很理想：如果在Emotion 9或10中不使用句点，则父const将继承嵌套的const样式。而且，如果嵌套的const具有重写样式，则最终将由父项继承。

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>

最佳答案

下面的代码将起作用，因为它在CodePen中不起作用，因为输出代码中附加了更多文本，并且再次遍历了const名称。但是，如果您在自己的代码库中进行测试，则可以正常工作。我不喜欢这样做，进入对象以在其中获取名称，感觉很hack。希望Emotion为这些实例提供特定的功能。

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