React中的CSS伪元素

Question

我正在构建React组件.我在组件中添加了CSS inline,正如React背后的人之一所展示的那样.我一直在努力寻找一种方法来内联添加CSS伪类,比如在演示文稿中标题为":: after"的幻灯片上.不幸的是,我不仅需要添加content:"";属性,还需要position:absolute; -webkit-filter: blur(10px) saturate(2);.幻灯片显示了如何添加内容{/* … */},但是如何添加其他属性？

Answer 1

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

普通的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>
    );
},

诀窍是,不是::after在CSS中使用以创建新元素,而应该通过React创建一个新元素.如果您不想在任何地方添加此元素,请创建一个为您执行此操作的组件.

对于特殊属性-webkit-filter,编码它们的方法是删除破折号 - 并将下一个字母大写.所以它变成了WebkitFilter.请注意,做{'-webkit-filter': ...}也应该工作.

Answer 2

内联样式不能用于定位伪类或伪元素.您需要使用样式表.

如果要动态生成CSS,那么最简单的方法是创建DOM元素<style>.

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

Answer 3

内联样式不支持伪或规则(例如,@ media).建议的范围从在JavaScript中重新实现的CSS功能像CSS状态:hover通过onMouseEnter和onMouseLeave使用更多的元件来再现伪元素像:after和:before只是使用一个外部的样式表.

个人不喜欢所有这些解决方案.通过JavaScript重新实现CSS功能不能很好地扩展 - 也没有添加多余的标记.

想象一个庞大的团队,每个开发人员都在重建CSS功能:hover.每个开发人员都会采用不同的方式,随着团队规模的扩大,如果可以完成,就会完成.事实是使用JavaScript有大约n种方法来重新实现CSS功能,随着时间的推移,你可以打赌所有这些方式的实现最终结果是意大利面条代码.

那么该怎么办？使用CSS.你问过内联样式会让你觉得你很可能在CSS-in-JS阵营(我也是!).已经发现colocating HTML和CSS与JS和HTML一样有价值,很多人还没有意识到(JS-HTML托管起初也有很多阻力).

在这个名为Style It的空间中提供了一个解决方案,它可以让您在React组件中编写明文CSS.无需浪费周期在JS中重新发明CSS.正确工作的正确工具,这是一个使用示例:after:

npm install style-it --save

功能语法(JSFIDDLE)

import React from 'react';
import Style from 'style-it';

class Intro extends React.Component {
  render() {
    return Style.it(`
      #heart {
        position: relative;
        width: 100px;
        height: 90px;
      }
      #heart:before,
      #heart:after {
        position: absolute;
        content: "";
        left: 50px;
        top: 0;
        width: 50px;
        height: 80px;
        background: red;
        -moz-border-radius: 50px 50px 0 0;
        border-radius: 50px 50px 0 0;
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
        -webkit-transform-origin: 0 100%;
        -moz-transform-origin: 0 100%;
        -ms-transform-origin: 0 100%;
        -o-transform-origin: 0 100%;
        transform-origin: 0 100%;
      }
      #heart:after {
        left: 0;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
        -webkit-transform-origin: 100% 100%;
        -moz-transform-origin: 100% 100%;
        -ms-transform-origin: 100% 100%;
        -o-transform-origin: 100% 100%;
        transform-origin :100% 100%;
      }
    `,
      <div id="heart" />
    );
  }
}

export default Intro;

JSX语法(JSFIDDLE)

import React from 'react';
import Style from 'style-it';

class Intro extends React.Component {
  render() {
    return (
      <Style>
      {`
        #heart {
          position: relative;
          width: 100px;
          height: 90px;
        }
        #heart:before,
        #heart:after {
          position: absolute;
          content: "";
          left: 50px;
          top: 0;
          width: 50px;
          height: 80px;
          background: red;
          -moz-border-radius: 50px 50px 0 0;
          border-radius: 50px 50px 0 0;
          -webkit-transform: rotate(-45deg);
          -moz-transform: rotate(-45deg);
          -ms-transform: rotate(-45deg);
          -o-transform: rotate(-45deg);
          transform: rotate(-45deg);
          -webkit-transform-origin: 0 100%;
          -moz-transform-origin: 0 100%;
          -ms-transform-origin: 0 100%;
          -o-transform-origin: 0 100%;
          transform-origin: 0 100%;
        }
        #heart:after {
          left: 0;
          -webkit-transform: rotate(45deg);
          -moz-transform: rotate(45deg);
          -ms-transform: rotate(45deg);
          -o-transform: rotate(45deg);
          transform: rotate(45deg);
          -webkit-transform-origin: 100% 100%;
          -moz-transform-origin: 100% 100%;
          -ms-transform-origin: 100% 100%;
          -o-transform-origin: 100% 100%;
          transform-origin :100% 100%;
        }
     `}

      <div id="heart" />
    </Style>
  }
}

export default Intro;

心脏例子来自CSS-Tricks

Answer 4

取决于您是否只需要将几个属性设置为内联样式，您可以执行类似此解决方案的操作（并使您不必安装特殊包或创建额外元素）：

/sf/answers/2940005981/

<span class="something" datacustomattribute="">
  Hello
</span>

<span class="something" datacustomattribute="">
  Hello
</span>

请注意，datacustomattribute必须以data小写开头才能满足 React。

Answer 5

您可以使用样式化组件。

安装它 npm i styled-components

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