javascript - React 中的 CSS 伪元素

Question

我正在 build React成分。我已经按照 this brilliant presentation 中的建议在组件中添加了 CSS 内联由 React 背后的人之一。我整晚都在尝试寻找一种内联添加 CSS 伪类的方法，就像演示文稿中标题为“::after”的幻灯片一样。不幸的是，我不仅需要添加 content:""; 属性，还需要添加 position:absolute; -webkit-filter: blur(10px) saturate(2);.幻灯片显示了如何通过 {/* … */} 添加内容，但是您将如何添加其他属性？

Answer 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>

使用内联样式进行 react :

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

诀窍在于，与其在 CSS 中使用 ::after 来创建新元素，不如通过 React 创建新元素。如果您不想在任何地方都添加这个元素，那么制作一个组件来为您完成。

对于像 -webkit-filter 这样的特殊属性，编码它​​们的方法是删除破折号 - 并将下一个字母大写。于是就变成了WebkitFilter。请注意，执行 {'-webkit-filter': ...} 也应该有效。