- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
以前在 Emotion 9 中,您可以使用 Emotion 类名来利用级联。您可以将情感常量括在大括号中,并在其前面加上句点,然后加上美元符号。例如,您可以这样做:
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 中不起作用,因为输出代码上附加了更多文本,并且它再次对常量名称进行哈希处理。但如果您在自己的代码库中进行测试,这确实有效。我不喜欢这样做,走进对象来获取名称,感觉很糟糕。希望 Emotion 针对这些情况提供一些特定的内容。
const cat = css`
color: red;
`;
const dog = css`
color: green;
.css-${cat.name} {
border-bottom: 1px solid currentColor;
}
`;
关于reactjs - 嵌套情感 10 个级联类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54599778/
我正在使用reactjs-popup,它的 Prop 之一是contentStyle,它允许您传递css-in-js对象来设置库中内部div的样式。 但是,当我传递带有 @media 的 css 对象
在查看了一些服务/工具之后,我得出了一个结论。大多数 Text-to-Speech 工具的技术含量太高、太机械化——换句话说,就是质量差的 c 语音。 是的,最重要的是,看起来它们带有“硬编码”语音模
我正在尝试使用 Emotion.sh在我的 React 测试元素中,但我使用与 example 中相同的代码得到以下错误 需要考虑的可能有冲突的事情:1、之前用的是npm,现在用的是yarn;2. 我
通过以下链接,我有了一些想法。我想问问我是做对了还是做错了。如果我走错了路,请指导我。 链接 Using libsvm for text classification c# How to use li
以下设置不显示background-image。作为调试步骤,我尝试在 const background 中设置 background: pink,这确实有效,确认 emotion 正在正确运行。 打
我有一个 data.frame,其中包含周数 week 和文本评论 text。我想将 week 变量视为我的分组变量,并对它运行一些基本的文本分析(例如 qdap::polarity)。一些评论文本有
我正在研究 Kaggle 电影情感分析,我发现电影评论已使用 Standford Parser 进行了解析。在探索数据集时,我发现相同的语句给出了不同的设置- their parents , wise
我正在尝试使用Affectiva emotion sdk 制作一个演示程序。但是,当我调用 detector.setLicensePath() 时,会抛出一个异常(见下图)。有谁知道如何解决这个问题?
我想设置一个使用 Material-UI v4.11.4 的 Typescript 项目来使用情感进行样式设置,为 MUI v5 版本做准备。目标是在项目中引入情感,以便开发人员可以开始使用新样式,而
我是一名优秀的程序员,十分优秀!