React中的CSS伪元素

一尘不染

React中的CSS伪元素

javascript

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

阅读 3056

2020-05-01

共1个答案

一尘不染

在React团队得到了@Vjeux的回复：

普通HTML / CSS：

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

以内联样式进行反应：

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

诀窍在于，与其使用::afterCSS来创建新元素，不如通过React来创建新元素。如果您不想在所有地方都添加此元素，请制作一个可以为您完成此操作的组件。

对于诸如的特殊属性-webkit-filter，对它们进行编码的方法是删除破折号-
并大写下一个字母。这样就变成了WebkitFilter。请注意，这样做{'-webkit-filter': ...}也应该起作用。

2020-05-01