React中的CSS伪元素

我正在构建React组件。正如React背后的一位专家本次精彩的演讲中所建议的那样,我已经在组件中添加了CSS内联我一直在努力寻找一种方法来内联添加CSS伪类,就像在演示文稿中名为“ :: after”的幻灯片上一样。不幸的是,我不仅需要添加该content:"";属性,还需要添加该属性position:absolute; -webkit-filter: blur(10px) saturate(2);幻灯片显示了如何通过添加内容{/* … */},但是如何添加其他属性?

GO凯2020/03/19 10:09:18

取决于是否只需要对几个属性进行内联样式设置,就可以执行以下解决方案(使您不必安装特殊的程序包或创建额外的元素):

https://stackoverflow.com/a/42000085

<span class="something" datacustomattribute="👋">
  Hello
</span>
.something::before {
  content: attr(datascustomattribute);
  position: absolute;
}

请注意,datacustomattribute必须以开头,data并且全部使用小写字母才能满足React的要求。