级联嵌套情感 10 类

Question

之前在 Emotion 9 中，您可以使用 Emotion class 名称来利用级联。您可以将 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>

我怎样才能在情绪 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>

Answer 1

以下会起作用，它只是在 CodePen 中不起作用，因为那里的输出代码附加了更多文本，并且它再次对 const 名称进行哈希处理。但是，如果您在自己的代码库中进行测试，这确实有效。我不喜欢这样做，踏入对象以获取其中的名称，感觉很老套。希望 Emotion 具有针对这些实例的特定内容。

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

级联嵌套情感 10 类

Nesting Emotion 10 classes for cascade

emotion

reactjs