之前在用Vue框架时,为了便于不同template之间的样式不相互影响,都设置了css的scoped属性.现在在学习React,发现并没有自带这种功能,通常可以使用多种方案解决.

一般在用CSS Modules或者CSS in Js的方法,不过感觉CSS Modules用的比较多,设置也并不复杂,这里写一下简单的教程.

为了让 CSS 也能适用软件工程方法，程序员想了各种办法，让它变得像一门编程语言。从最早的Less、SASS，到后来的 PostCSS，再到最近的 CSS in JS，都是为了解决这个问题。

在React中使用creat-react-app或者使用vite都直接用就行了,一般的脚手架都默认集成了CSS Modules.

使用方法

首先创建css文件,要求命名为xxx.module.css

1
2
3
4

/* style.module.css */
.className {
  color: green;
}

当从JS模块导入CSS模块时，它会导出一个包含所有本地名称到全局名称的映射的对象。

1
2
3

import styles from "./style.module.css";
// import { className } from "./style.css";
element.innerHTML = '<div class="' + styles.className + '">';

在编译时会给类名前加上一个唯一值用以区分,事实上vue的scoped也是这个原理.

使用import styles from "./xxxx.module.css";导入后,事实上不管是否使用,都会将这个css文件里的规则用上,比如这个文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 4rem;
}

.nav a:link,
.nav a:visited {
  text-decoration: none;
  color: var(--color-light--2);
  text-transform: uppercase;
  font-size: 1.5rem;
  font-weight: 600;
}

/* CSS Modules feature */
.nav a:global(.active) {
  color: var(--color-brand--2);
}

a.ctaLink:link,
a.ctaLink:visited {
  background-color: var(--color-brand--2);
  color: var(--color-dark--0);
  padding: 0.8rem 2rem;
  border-radius: 7px;
}

div {
  background-color:red;
}

这里div { background-color:red; }会直接用上,但是如果定义了类并使用的话,这个类就会生成唯一类名.

命名方式

对于本地类名，建议使用驼峰命名法，但不强制要求。

这是因为常见的替代方案，连字符命名法，在尝试访问style.class-name时可能会导致意外行为，因为它作为点符号表示法。您仍然可以使用方括号表示法（例如style[‘class-name’]）来解决连字符命名法，但是style.className更清晰。

简单来说命名需要驼峰.

:global全局使用css

:global切换到当前选择器的全局作用域，对应的标识符。:global(.xxx) 对应的@keyframes :global(xxx)声明括号中的内容在全局作用域中。

例如,如果自定义了nav类,下面有类名为active的元素,这时不能使用.nav .active进行选择,因为会给active类名字前生成区分的id,又要在相关元素上加上. 为了避免麻烦,可以使用:global

1
2
3

.nav a:global(.active) {
  color: var(--color-brand--2);
}

进阶

使用compose组合其他选择器的规则

1
2
3
4
5
6
7
8

.className {
  background-color: blue;
}

.title {
  composes: className;
  color: red;
}

如果继承其他文件里的

1
2
3

.className {
  background-color: blue;
}

1
2
3
4

.title {
  composes: className from './another.css';
  color: red;
}

参考资料

1. CSS Modules 用法教程 - 阮一峰的网络日志 (ruanyifeng.com)
2. css-modules/css-modules: Documentation about css-modules (github.com)
3. react 中 css modules-基本使用 - 掘金 (juejin.cn)
4. 在 React 中使用 CSS Modules - 简书 (jianshu.com)