首页 文章

React中的CSS伪元素

提问于
浏览
46

我正在构建React组件 . 我已经在this brilliant presentation中由React背后的人之一在组件中添加了CSS内联 . 我一直在努力寻找一种方法来添加CSS伪类内联,就像在演示文稿中 Headers 为"::after"的幻灯片一样 . 不幸的是,我不仅需要添加 content:""; 属性,还需要添加 position:absolute; -webkit-filter: blur(10px) saturate(2); . 幻灯片显示了如何通过 {/* … */} 添加内容,但是如何添加其他属性?

3 回答

  • 9

    得到了@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>
        );
    },
    

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

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

  • 19

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

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

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

    内联样式不支持伪或规则(例如,@ media) . 建议的范围从重新实现CSS中的CSS功能,如CSS状态,如 :hoveronMouseEnteronMouseLeave ,使用更多元素重现伪元素,如 :after:before ,只使用外部样式表 .

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

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

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

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

    npm install style-it --save

    Functional SyntaxJSFIDDLE

    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 SyntaxJSFIDDLE

    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

相关问题