说说 React 中引入 CSS 的方式有哪几种?区别?

南星媛
4 阅读4分钟

组件式选择合适的 CSS 遵循原则

  • 可以编写的局部 CSS，不会随意污染其他组件内的原生。
  • 可以编写的动态 CSS，可以获取当前组件的一些状态，根据状态的变化生成不同的 CSS 样式。
  • 支持所有的 CSS 特性：伪类、动画、媒体查询等。
  • 编写起来简洁方便，最好符合一贯的 CSS 风格特点。

Vue 使用 CSS 更为简洁：

  • 通过 style 标签编写样式
  • scoped 属性决定编写的样式是否局部有效
  • lang 属性设置预处理器
  • 内联样式风格的方式来根据最新状态设置和改变 css

方式

React 引入 CSS 不如 Vue 简洁，各有利弊。

  • 使用内联样式
  • 引入 .css 文件
  • 引入 .module.css 文件
  • css in js (Styled-Components库 / Emotion 库)

总结

  • 内联样式 简单直观，适合简单的样式定义。

  • CSS 文件

    适合复杂的样式定义，支持预处理器

  • CSS 模块

    实现样式隔离，适合大型项目

  • Style-Components

    提供高级功能，如变量和逻辑

  • Emotion

    强大灵活，支持更多高级特性

在组件内直接使用

直接在组件中书写 css 样式，通过 style 属性直接引入，如：

import React, { Component } from "react";
const div1 = {
  width: "30px",
  margin: "3px auto",
  backgroundColor: "#44014C",
  boxSizing: "border-box",
};
class Test extends Component {
    constructor (props,context){
        super(props)
    }
    render(){
        return (
            <div style={div1}>111</div>
            <div style={{backgroundColor:"red"}}>111</div>
        )
    }
}
export default Test

从上面可以看到，CSS 属性需要转化成驼峰写法，这种方式的优点：

  • 内联样式，样式之间不会有冲突。
  • 可以动态获取当前 state 中的状态。

缺点：

  • 写法上都需要使用驼峰标识。
  • 某些样式没有提示。
  • 大量的样式，代码混乱。
  • 某些样式无法编写(比如伪类/伪元素)。

组件中引入 css 文件

将 CSS 单独写在一个 CSS 文件中，然后在组件中直接引入 App.css 文件

// App.css

.title {
  color: red;
  font-size: 20px;
}
.desc {
  color: green;
  text-decoration: underline;
}

//组件中

import React, { PureComponent } from "react";
import Home from "./home";
import "./App.css";
export default class App extends PureComponent {
  render() {
    return (
      <div className="app">
        <h2 className="title">标题</h2>
        <p className="desc">文字描述</p >
        <Home />
      </div>
    );
  }
}

这种方式存在不好的地方在于样式是全局生效，样式之间会相互影响。

组件中引入 .module.css 文件

将 CSS 文件作为一个模块引入，这个模块中的所有 CSS，只作用于当前组件。不会影响当前组件的后代组件 这种方式是 Webpack 的方案，只需要配置 Webpack 配置文件中 modules:true 即可。

import React, { PureComponent } from "react";
import Home from "./home";
import "./App.module.css";
export default class App extends PureComponent {
  render() {
    return (
      <div className="app">
        <h2 className="title">标题</h2>
        <p className="desc">文字描述</p >
        <Home />
      </div>
    );
  }
}

这种方式能够解决局部作用域问题，但也有一定的缺陷：

  • 引用的类名，不能使用连接符 (.xxx-xx)，在 JS 中是不识别的。
  • 所有的 ClassName 都必须使用 {style.className} 的形式来编写。
  • 不方便动态来修改某些样式，依然需要使用内联样式的方式。

css in js

css-in-js 是指一种模式，其中 CSS 是由 JS 生成而不是在外部文件中定义；此功能并不是 React 的一部分，而是由第三方库提供，例如：

  • Styled-components
  • Emotion
  • Glamorous

主要是看看 Styled-Components 的基本使用，本质是通过函数的调用，最终创建出一个组件：

  • 这个组件就会被自动添加上一个不重复的 class。
  • Styled-Components 会给该 class 添加相关的样式。

基本使用如下：创建一个 style.js 文件用于存放样式组件:

export const SelfLink = styled.div`
  height: 50px;
  border: 1px solid red;
  color: yellow;
`;
export const SelfButton = styled.div`
  height: 150px;
  width: 150px;
  color: 
${(props) => props.color};
  background-image: url($
{(props) => props.src});
  background-size: 150px 150px;
`;
// 引入样式组件也很简单
import React, { Component } from "react";
import { SelfLink, SelfButton } from "./style";
export default class Test extends Component {
  render() {
    return (
      <div>
        <SelfLink title="People">SelfLink</SelfLink>
        <SelfButton color="#ffffff"> SelfButton </SelfButton>
      </div>
    );
  }
}

区别

通过上面四种样式的引入，可以看到：

  • 在组件内直接使用 CSS (内联式)该方式编写方便，容易根据状态修改样式属性，但是大量的演示编写容易导致代码混乱。

  • 组件内引入 .css 文件符合我们日常的编写习惯，但是作用域是全局的，样式之间会层叠。

  • 引入 .module.css 文件能够解决局部作用域问题，但是不方便动态修改样式，需要使用内联的方式进行样式的编写。

  • 通过 css in js 这种方法，可以满足大部分场景的应用，可以类似于预处理器一样样式嵌套、定义、修改状态等。

至于使用 React 用哪种方案引入 CSS，并没有一个绝对的答案，可以根据各自情况选择合适的方案。

CSS，全称为层叠样式表（Cascading Style Sheets），是一种用于描述网页样式的计算机语言。它允许开发者精确地控制网页的布局、字体、颜色等视觉元素，从而提升网页的美观性和用户体验。

avatar
文章
阅读
粉丝