腾讯云

文章/答案/技术大牛

发布

社区首页 >专栏 >React 进阶 - 模块化 CSS

React 进阶 - 模块化 CSS

Cellinlab

发布于 2023-05-17 12:49:44

2K00

代码可运行

文章被收录于专栏：Cellinlab's BlogCellinlab's Blog

运行总次数：0

代码可运行

# 模块化 CSS 的作用

随着 React 项目日益复杂化、繁重化，React 中 css 面临很多问题，比如样式类名全局污染、命名混乱、样式覆盖等。这时， css 模块化就显得格外重要。

css 模块化的几个重要作用:

防止全局污染，样式被覆盖
- 如果不规范 css 的话，这种情况在实际开发中会变得更加棘手，有时候甚至不得不用 !important 或者行内样式来解决
- Web Components 标准中的 Shadow DOM 能彻底解决这个问题，但它的做法有点极端，样式彻底局部化，造成外部无法重写样式，损失了灵活性
解决命名混乱
- 没有 css 模块化和统一的规范，会使得多人开发，没有一个规范
减少 css 代码冗余，体积庞大
- React 中各个组件是独立的，所以导致引入的 css 文件也是相互独立的，比如在两个 css 中，有很多相似的样式代码，如果没有用到 css 模块化，构建打包上线的时候全部打包在一起，那么无疑会增加项目的体积

React 使用 css 模块化的思路：

css module ，依赖于 webpack 构建和 css-loader 等 loader 处理，将 css 交给 js 来动态加载
直接放弃 css ，css in js 用 js 对象方式写 css ，然后作为 style 方式赋予给 React 组件的 DOM 元素，这种写法将不需要 .css .less .scss 等文件，取而代之的是每一个组件都有一个写对应样式的 js 文件

# CSS Modules

css Modules ，使得项目中可以像加载 js 模块一样加载 css ，本质上通过一定自定义的命名规则生成唯一性的 css 类名，从根本上解决 css 全局污染，样式覆盖的问题。对于 css modules 的配置，推荐使用 css-loader，它对 CSS Modules 的支持最好，而且很容易使用。

css-loader 配置：

{
  test: /\.css$/,
  use: [
    'css-loader?modules'
  ]
}

css 文件：

.title {
  color: red;
}

js 文件：

import style from './index.css'

const App = () => {
  return (
    <div className={style.title}>Hello World</div>
  )
}

# 自定义命名规则

{
  test: /\.css$/,
  use: [
    {
      loader: 'css-loader',
      options: {
        modules: {
          localIdentName: '[path][name]__[local]--[hash:base64:5]'
        }
      }
    }
  ]
}

[path][name]__[local] -> 开发环境，便于调试，可以直接找到此类名对应的文件
[hash:base64:5] -> 生产环境，便于生产环境压缩类名

# 全局变量

一旦经过 css modules 处理的 css 文件类名，再引用的时候就已经无效了。因为声明的类名，比如如上的 .text 已经被处理成了哈希形式。

那么怎么样快速引用声明好的全局类名呢？CSS Modules 允许使用 :global(.className) 的语法，声明一个全局类名。凡是这样声明的 class ，都不会被编译成哈希字符串。

.title {
  color: red;
}
:global(.title_bg) {
  background-color: pink;
}

import style from './index.css'

const App = () => {
  return (
    <div className={`${style.title} title_bg`}>Hello World</div>
  )
}

CSS Modules 还提供一种显式的局部作用域语法: local(.title) 等同于 .title：

.title {
  color: red;
}

/* 等同于 */
:local(.title) {
  color: red;
}

# 组合样式

CSS Modules 提供了一种 composes 组合方式，实现对样式的复用：

.base {
  color: blue;
}
.title {
  composes: base; /* 继承 base 样式 */
  font-size: 20px;
}

composes 可以将多个 class 类名添加到元素中。composes 还有一个更灵活的方法，支持动态引入别的模块下的类名。

style1.css:

.base {
  color: red;
}

style2.css:

.title {
  composes: base from './style1.css';
  font-size: 20px;
}

# 配置 less 和 sass

less webpack 配置

{
  test: /\.less$/,
  use: [
    {
      loader: 'css-loader',
      options: {
        modules: {
          localIdentName: '[path][name---[local]---[hash:base64:5]'
        }
      }
    },
    'less-loader'
  ]
}

index.less:

.text {
  color: blue;
  background-color: pink;
}

index.js:

import style from './index.less'

const App = () => {
  return (
    <div className={style.text}>Hello World</div>
  )
}

# 组合方案

正常情况下，React 项目可能在使用 css 处理样式之外，还会使用 scss 或者 less 预处理。

可以约定对于全局样式或者是公共组件样式，可以用 .css 文件 ，不需要做 CSS Modules 处理，这样就不需要写 :global 等繁琐语法
对于项目中开发的页面和业务组件，统一用 scss 或者 less 等做 CSS Module，也就是 css 全局样式 + less / scss CSS Modules 方案

这样就会让 React 项目更加灵活的处理 CSS 模块化。

import React from 'react';

import style from './index.less';

export default () => {
  return <div>
    <button className='search-btn'>Search</button>
    <div className={style.text}>Less + CSS Modules</div>
  </div>
}

# 动态添加 class

CSS Modules 可以配合 classNames 库实现更灵活的动态添加类名。

index.less

.base {}
.dark {
  background-color: #000;
  color: #fff;
}
.light {
  background-color: #fff;
  color: #000;
}

index.jsx

import cx from 'classnames';

import style from './index.less';

export default function Index() {
  const [theme, setTheme] = useState('dark');
  return <div>
    <button
      className={cx(style.base, style[theme])}
      onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
    >
      Change Theme
    </button>
  </div>;
}

# CSS Modules 优点及注意事项

优点
- CSS Modules 的类名都有自己的私有域的，可以避免类名重复/覆盖，全局污染问题
- 引入 css 更加灵活，css 模块之间可以互相组合
- class 类名生成规则配置灵活，方便压缩 class 名
注意事项
- 仅用 class 类名定义 css ，不使用其他选择器
- 不要嵌套 css .a{ .b{} } 或者重叠 css .a .b {}

# CSS IN JS

# 基础使用

CSS IN JS 相比 CSS Modules 更加简单， CSS IN JS 放弃 css ，用 js 对象形式直接写 style 。

index.jsx

import React from 'react';
import Style from './style';

export default function Index() {
  return <div style={Style.boxStyle}>
    <span style={Style.textStyle}>CSS in JS</span>
  </div>;
}

style.js

const boxStyle = {
  backgroundColor: '#000',
};

const textStyle = {
  color: '#fff',
};

export default {
  boxStyle,
  textStyle,
};

# 灵活运用

由于 CSS IN JS 本质上就是运用 js 中对象形式保存样式，所以 js 对象的操作方法都可以灵活的用在 CSS IN JS 上。

拓展运算符实现样式继承

const baseStyle = {
  color: '#fff',
  fontSize: '20px',
};
const containerStyle = {
  ...baseStyle,
  backgroundColor: '#000',
};

动态添加样式变得更加灵活

const dark = {
  backgroundColor: '#000',
};
const light = {
  backgroundColor: '#fff',
};

import React from 'react';
import Style from './style';

const Index = () => {
  return <div style={theme === 'light' ? Style.dark : Style.light }>
    CSS in JS
  </div>;
}

# styled-components 库

CSS IN JS 也可以由一些第三方库支持，如 styled-components，可以把写好的 css 样式注入到组件中，项目中应用的已经是含有样式的组件。

基础用法

import React from 'react';
import styled from 'styled-components';

/* 给 button 标签添加样式，形成 Button React 组件 */
const Button = styled.button`
  background: #6a8bad;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
`;
export default function Index() {
  return <Button>Styled Components</Button>;
}

基于 props 动态添加样式

通过给生成的组件添加 props 属性，来动态添加样式

import React from 'react';
import styled from 'styled-components';

const Button = styled.button`
  background: #6a8bad;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  /* 通过 props 来动态添加样式 */
  ${props => props.primary && `
    background: #fff;
    color: #6a8bad;
  `}
`;

export default function Index() {
  return <div>
    <Button>Styled Components</Button>
    <Button primary>Styled Components</Button>
  </div>;
}

继承样式

可以通过继承方式来达到样式的复用

import React from 'react';
import styled from 'styled-components';

const Button = styled.button`
  background: #6a8bad;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
`;

const PrimaryButton = styled(Button)`
  background: #fff;
  color: #6a8bad;
`;

export default function Index() {
  return <div>
    <Button>Styled Components</Button>
    <PrimaryButton>Styled Components</PrimaryButton>
  </div>;
}

# CSS IN JS 特点及注意事项

特点
- CSS IN JS 本质上放弃了 css ，变成了 css in line 形式，所以根本上解决了全局污染，样式混乱等问题
- 运用起来灵活，可以运用 js 特性，更灵活地实现样式继承，动态添加样式等场景
- 由于编译器对 js 模块化支持度更高，使得可以在项目中更快地找到 style.js 样式文件，以及快捷引入文件中的样式常量
- 无须 webpack 额外配置 css，less 等文件类型
注意事项
- 虽然运用灵活，但是写样式不如 css 灵活，由于样式用 js 写，所以无法像 css 写样式那样可以支持语法高亮，样式自动补全等

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022/9/15，如有侵权请联系 cloudcommunity@tencent.com 删除

react