Javascript React中的CSS伪元素

我正在构建组件。我已经在组件中添加了CSS内联，正如React后面的一个家伙所建议的那样。我整晚都在试图找到一种方法来内联添加CSS伪类，就像在演示文稿中标题为“：：after”的幻灯片上一样。不幸的是，我不需要只添加

内容：“”属性，但也
位置：绝对-webkit过滤器：模糊（10px）饱和（2）。幻灯片显示了如何通过
{/*…*/}
添加内容，但如何添加其他属性？
内联样式不能用于针对伪类或伪元素。您需要使用样式表

如果您想动态生成CSS，那么最简单的方法就是创建一个DOM元素

<style dangerouslySetInnerHTML={{
  __html: [
     '.my-special-div:after {',
     '  content: "Hello";',
     '  position: absolute',
     '}'
    ].join('\n')
  }}>
</style>
<div className='my-special-div'></div>

从团队的@Vjeux那里得到了回复：

普通HTML/CSS：

<div class="something"><span>Something</span></div>
<style>
    .something::after {
    content: '';
    position: absolute;
    -webkit-filter: blur(10px) saturate(2);
}
</style>

什么
在……之后{
内容：''；
位置：绝对位置；
-webkit过滤器：模糊（10px）饱和（2）；
}

使用内联样式进行反应：

render: function() {
    return (
        <div>
          <span>Something</span>
          <div style={{position: 'absolute', WebkitFilter: 'blur(10px) saturate(2)'}} />
        </div>
    );
},

render:function（）{
返回(
某物
);
},

诀窍在于，不要在CSS中使用
：：在
之后创建新元素，而应该通过React创建新元素。如果你不想在任何地方都添加这个元素，那么就制作一个组件来完成它

对于像
-webkit filter
这样的特殊属性，编码它们的方法是删除破折号，并将下一个字母大写。所以它变成了
WebkitFilter
。请注意，执行
{'-webkit filter'：…}
也应该有效。
内联样式不支持伪规则或at规则（例如，@media）。建议在JavaScript中为CSS状态重新实现CSS功能，如通过
onMouseEnter
和
onMouseLeave
悬停

，使用更多元素来复制伪元素，如

：after

和

：before

，以仅使用外部样式表

我个人不喜欢所有这些解决方案。通过JavaScript重新实现CSS功能的伸缩性不好——添加多余的标记也不好

想象一个大型团队，其中每个开发人员都在重新创建CSS功能，如

：hover

。随着团队规模的增长，每个开发人员的做法都会有所不同，如果能够做到，就一定会做到。事实上，JavaScript有大约n种方法可以重新实现CSS特性，随着时间的推移，你可以打赌每一种方法都会得到实现，最终结果是意大利面条代码

那怎么办呢？使用CSS。假设你问过内联样式，你会认为你很可能是JS阵营中的CSS（我也是！）。我们已经发现，对HTML和CSS进行colocating与对JS和HTML进行colocating一样有价值，但很多人还没有意识到这一点（JS-HTML colocation最初也有很多阻力）

在这个空间中创建了一个名为的解决方案，它只允许您在React组件中编写纯文本CSS。无需浪费时间在JS中重新发明CSS。正确的工具用于正确的作业，下面是一个使用

：after

的示例：

npm安装风格it--保存

函数语法（）

从“React”导入React；
从“样式it”导入样式；
类简介扩展了React.Component{
render（）{
回归风格(`
#心{
位置：相对位置；
宽度：100px；
高度：90px；
}
#心脏：以前，
#心脏：之后{
位置：绝对位置；
内容：“；
左：50px；
排名：0；
宽度：50px；
高度：80px；
背景：红色；
-moz边界半径：50px 50px 0；
边界半径：50px 50px 0；
-webkit变换：旋转（-45度）；
-moz变换：旋转（-45度）；
-ms变换：旋转（-45度）；
-o变换：旋转（-45度）；
变换：旋转（-45度）；
-webkit转换来源：0 100%；
-moz变换原点：0 100%；
-ms变换原点：0.100%；
-o-变换原点：0.100%；
变换原点：0.100%；
}
#心脏：之后{
左：0；
-webkit变换：旋转（45度）；
-moz变换：旋转（45度）；
-ms变换：旋转（45度）；
-o变换：旋转（45度）；
变换：旋转（45度）；
-webkit转换来源：100%100%；
-moz变换原点：100%100%；
-ms变换原点：100%100%；
-o-变换原点：100%100%；
变换原点：100%100%；
}
`,
);
}
}
导出默认简介；

JSX语法（）

从“React”导入React；
从“样式it”导入样式；
类简介扩展了React.Component{
render（）{
返回(
{`
#心{
位置：相对位置；
宽度：100px；
高度：90px；
}
#心脏：以前，
#心脏：之后{
位置：绝对位置；
内容：“；
左：50px；
排名：0；
宽度：50px；
高度：80px；
背景：红色；
-moz边界半径：50px 50px 0；
边界半径：50px 50px 0；
-webkit变换：旋转（-45度）；
-moz变换：旋转（-45度）；
-ms变换：旋转（-45度）；
-o变换：旋转（-45度）；
变换：旋转（-45度）；
-webkit转换来源：0 100%；
-moz变换原点：0 100%；
-ms变换原点：0.100%；
-o-变换原点：0.100%；
变换原点：0.100%；
}
#心脏：之后{
左：0；
-webkit变换：旋转（45度）；
-moz变换：旋转（45度）；
-ms变换：旋转（45度）；
-o变换：旋转（45度）；
变换：旋转（45度）；
-webkit转换来源：100%100%；
-moz变换原点：100%100%；
-ms变换原点：100%100%；
-o形变换原点：100%100%
let iconStyle = {
    position: 'relative',
    maxHeight: '90px',
    top: '25%',
}

let iconStyle: CSSProperties = {
    position: 'relative',
    maxHeight: '90px',
    top: '25%',
}

import React from 'react';
import styled from 'styled-components';

const YourEffect = styled.div`
  height: 50px;
  position: relative;
  &:after {
    // whatever you want with normal CSS syntax. Here, a custom orange line as example
    content: '';
    width: 60px;
    height: 4px;
    background: orange
    position: absolute;
    bottom: 0;
    left: 0;
  },

const YourComponent = props => {
  return (
    <YourEffect>...</YourEffect>
  )
}

export default YourComponent

<span class="something" datacustomattribute="I don't know if this would be considered hacky but it certainly works (using CSS variable):

const passedInlineStyle = { '--color':'blue'}

background:var(--color);