当前位置: 首页 > 工具软件 > ReactCSS > 使用案例 >

React中编写CSS的常见方案

龙佐
2023-12-01

React编写CSS的方式

React中CSS的概述

前面说过,整个前端已经是组件化的天下:

而CSS的设计就不是为组件化而生的,所以在目前组件化的框架中都在寻找一种合适的编写CSS的解决方案。

在组件化中选择合适的CSS解决方案应该符合以下条件:

可以编写局部css: 组件内部的css具备自己的局部作用域,不会随意污染其他组件内的元素;

可以编写动态的css: 可以获取当前组件的一些状态,根据状态的变化生成不同的css样式;

支持所有的css特性: 伪类、动画、媒体查询等;

编写起来简洁方便、最好符合一贯的css风格特点;

等等…

事实上,css一直是React的痛点,也是被很多开发者吐槽、诟病的一个点, 在这一点上,Vue做的要好于React:

Vue通过在 .vue 文件中编写 <style><style> 标签来编写自己的样式;

通过是否添加 scoped 属性来决定编写的样式是全局有效还是局部有效;

通过 lang 属性来设置你喜欢的 less、sass等预处理器;

通过内联样式风格的方式来根据最新状态设置动态的 改变css;

等等…

Vue在CSS上虽然不能称之为完美,但是已经足够简洁、自然、方便了,至少统一的样式风格不会出现多个开发人员、多个项目采用不一样的样式风格的情况

相比而言,React官方并没有给出在React中统一的样式风格:

由此,从普通的css,到css modules,再到css in js,有几十种不同的解决方案,上百个不同的库;

大家一直在寻找最好的或者说最适合自己的CSS方案,但是到目前为止也没有统一的方案;


内联样式CSS的写法

内联样式是官方推荐的一种css样式的写法:

style 接受一个采用小驼峰命名属性的 JavaScript 对象,而不是 CSS 字符串;

并且可以引用state中的状态来设置相关的样式;

export class App extends PureComponent {
  constructor() {
    super()

    this.state = {
      style: {
        boxSizing: "borderBox",
        padding: "20px",
        backgroundColor: "skyblue",
        fontSize: "20px",
        color: "blue"
      },
      contentSize: 20
    }
  }

  render() {
    return (
      <div>
        <h2 style={{color: "red", fontSize: "24px"}}>我是标题</h2>
        {/* 可以引用state中的状态 */}
        <p style={this.state.style}>我是内容哈哈哈</p>
        <p style={{fontSize: `${this.state.contentSize}px`}}>内容2呵呵呵</p>
      </div>
    )
  }
}

内联样式的优点:

1.内联样式, 样式之间不会有冲突

2.可以动态获取当前state中的状态

内联样式的缺点:

1.写法上都需要使用驼峰标识

2.某些样式没有智能提示

3.大量的内联样式, 会造成代码混乱

4.某些样式无法编写(比如伪类/伪元素)

所以官方依然是希望内联合适和普通的css来结合编写;


普通CSS文件的方案

普通的css我们通常会编写到一个单独的文件,之后再进行引入

这样的编写方式和普通的网页开发中编写方式是一致的:

如果我们按照普通的网页标准去编写,那么也不会有太大的问题;

但是组件化开发中我们总是希望组件是一个独立的模块,即便是样式也只是在自己内部生效,不会相互影响;

但是普通的css都属于全局的css,样式之间会相互影响;

这种编写方式最大的问题是样式之间会相互层叠掉, 产生冲突;

例如下面代码中, App组件的css样式会对Home组件生效, 如果有其他组件同理, 都会生效

import './App.css'

export class App extends PureComponent {
  render() {
    return (
      <div>
        <h2 className='title'>App 标题</h2>
        <Home/>
      </div>
    )
  }
}
.title {
  color: red;
  font-size: 30px;
} 

CSS Modules的方案

css modules并不是React特有的解决方案,而是所有使用了类似于webpack配置的环境下都可以使用的

如果在其他项目中使用它,那么我们需要自己来进行配置,比如配置webpack.config.js中的modules: true等。

React的脚手架已经内置了css modules的配置:

.css/.less/.scss 等样式文件都需要修改成 .module.css/.module.less/.module.scss 等;

之后就可以引用并且进行使用了, 使用方式如下;

// 引入模块
import appStyle from './App.module.css'

export class App extends PureComponent {
  render() {
    return (
      <div>
        {/* 从appStyle中获取title复制给className */}
        <h2 className={appStyle.title}>App 标题</h2>
        <Home/>
      </div>
    )
  }
}

css modules确实解决了局部作用域的问题,也是很多人喜欢在React中使用的一种方案

但是这种方案也有自己的缺陷:

引用的类名,不能使用连接符(.home-title),在JavaScript中是不识别的;

所有的className都必须使用{style.className} 的形式来编写;

不方便动态来修改某些样式,依然需要使用内联样式的方式;

如果你觉得上面的缺陷还算OK,可以接受的话, 那么你在开发中完全可以选择使用css modules来编写,并且也是在React中很受欢迎的一种方式

还有一种个人觉得最好用的CSS解决方案, 就是CSS In JS, 在下一篇文章在介绍

 类似资料: