React 中的 CSS 伪元素 [英] CSS pseudo elements in React

问题描述

我正在构建 React 组件.我按照这个精彩的演示 由 React 背后的人之一编写.我整夜都在尝试找到一种方法来内联添加 CSS 伪类，就像在标题为::after"的幻灯片上一样.在演示文稿中.不幸的是，我不仅需要添加 content:""; 属性，还需要添加 position:absolute;-webkit-filter:blur(10px) saturate(2);.幻灯片展示了如何通过 {/* … */} 添加内容，但您将如何添加其他属性?

解决方案

在 React 团队:

普通 HTML/CSS:

<div class="something"><span>Something</span></div><风格>.something::after {内容: '';位置:绝对；-webkit 过滤器:模糊(10 像素)饱和(2)；}</风格>

使用内联样式做出反应:

render: function() {返回 (<div><span>东西</span><div style={{position: 'absolute', WebkitFilter: 'blur(10px) saturate(2)'}}/>

);},

诀窍是不要在 CSS 中使用 ::after 来创建一个新元素，而是应该通过 React 创建一个新元素.如果您不想在任何地方都添加此元素，请制作一个组件来为您完成.

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

I'm building React components. I have added CSS inline in the components as suggested in this brilliant presentation by one of the people behind React. I've been trying all night to find a way to add CSS pseudo classes inline, like on the slide titled "::after" in the presentation. Unfortunately, I do not just need to add the content:""; property, but also position:absolute; -webkit-filter: blur(10px) saturate(2);. The slides show how to add content through {/* … */}, but how would you add other properties?

解决方案

Got a reply from @Vjeux over at the React team:

Normal HTML/CSS:

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

React with inline style:

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

The trick is that instead of using ::after in CSS in order to create a new element, you should instead create a new element via React. If you don't want to have to add this element everywhere, then make a component that does it for you.

For special attributes like -webkit-filter, the way to encode them is by removing dashes - and capitalizing the next letter. So it turns into WebkitFilter. Note that doing {'-webkit-filter': ...} should also work.

这篇关于React 中的 CSS 伪元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！