在组件内部定义样式，但不要内联

Define styles inside component but do not inline them [React]

本文关键字：组件 内部 定义 样式      更新时间：2023-09-26

我喜欢在React组件中包含所有内容(包括样式)的想法。
但是我不喜欢内联样式的想法(1- duplicate, 2-heavy mess on Elements选项卡)。

是否有任何现有的方法来定义组件内部的样式，但不需要内联它们?

我的意思是在开发和生产环境中。

Kind of:仍然使用CSS，但与一个组件隔离…

完整要求:

  1. 在组件内定义的样式
  2. 不内联
  3. support preudo-classes/elements
    4. 支持@-rules

是的，你可以使用jss，它也有react集成

我通过在组件的jsx文件中导入一个.sass文件来做到这一点。然后，我将一个类放在组件的最外层的div上，并通过该类命名.sass文件中的所有内容。

是的，做Style It是因为我只想写纯文本CSS，而不是通过对象文字语法。

满足您的所有要求和部分要求。没有构建步骤或任何需要配置的东西，自动作用域使您的选择器远离全局CSS命名空间，默认情况下XSS安全，很小，并且无样式内容flash (FOUC)免费。

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

相关文章：