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

问题描述

我正在建立 React 组件。我已在中建议的组件中添加CSS内嵌这个辉煌的演讲由React背后的家伙之一。我一直在试图找到一种方法来添加CSS伪类内联，如幻灯片标题为::后的演示文稿。不幸的是，我不需要添加 content：; 属性，还要添加 position：absolute; -webkit-filter：blur（10px）saturate（2）; 。幻灯片显示如何通过 {/ * ... * /} 添加内容，但是如何添加其他属性？

解决方案

从 React 小组获得@Vjeux的回复：

普通HTML / CSS：

 < div class = >< span>有事< / 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> 
）;诀窍是代替使用 :: 
}，
  


after 在CSS中，为了创建一个新的元素，你应该改为通过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 guys 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屋！