React样式私有化处理：CSSModules 的解析笔记

在React中，CSS Modules 是一种常用的样式私有化处理方案，它通过将CSS文件中的类名局部化，避免全局样式冲突。以下是CSS Modules的用法详解，包括 :global、标签 className 引用多个样式时的模板语法等。

1. 基本用法

首先，确保你的项目支持CSS Modules。通常，CSS Modules的文件名格式为 [name].module.css。

1.1 创建CSS Module文件

创建一个 styles.module.css 文件：

/* styles.module.css */
.container {
  padding: 20px;
  background-color: #f0f0f0;
}

.title {
  font-size: 24px;
  color: #333;
}

1.2 在React组件中使用CSS Modules

import React from 'react';
import styles from './styles.module.css';

const MyComponent = () => {
  return (
    <div className={styles.container}>
      <h1 className={styles.title}>Hello, CSS Modules!</h1>
    </div>
  );
};

export default MyComponent;

在这个例子中，styles.container 和 styles.title 会被编译成唯一的类名，从而避免样式冲突。

2. 使用 :global 选择器

有时候你可能需要在CSS Modules中使用全局样式。这时可以使用 :global 选择器。

2.1 在CSS Module中定义全局样式

/* styles.module.css */
.container {
  padding: 20px;
  background-color: #f0f0f0;
}

:global(.global-title) {
  font-size: 32px;
  color: red;
}

2.2 在React组件中使用全局样式

import React from 'react';
import styles from './styles.module.css';

const MyComponent = () => {
  return (
    <div className={styles.container}>
      <h1 className="global-title">This is a global title</h1>
    </div>
  );
};

export default MyComponent;

在这个例子中，.global-title 是一个全局样式，不会被CSS Modules局部化。

3. 引用多个样式

有时候你可能需要在一个元素上应用多个类名。可以使用模板字符串或 classnames 库来实现。

3.1 使用模板字符串

import React from 'react';
import styles from './styles.module.css';

const MyComponent = () => {
  return (
    <div className={`${styles.container} ${styles.specialContainer}`}>
      <h1 className={styles.title}>Hello, CSS Modules!</h1>
    </div>
  );
};

export default MyComponent;

3.2 使用 classnames 库

首先安装 classnames 库：

npm install classnames

然后在组件中使用：

import React from 'react';
import classNames from 'classnames';
import styles from './styles.module.css';

const MyComponent = () => {
  return (
    <div className={classNames(styles.container, styles.specialContainer)}>
      <h1 className={styles.title}>Hello, CSS Modules!</h1>
    </div>
  );
};

export default MyComponent;

4. 组合样式

CSS Modules 还支持组合样式，可以在一个类中引用另一个类。

4.1 在CSS Module中组合样式

/* styles.module.css */
.base {
  padding: 20px;
  background-color: #f0f0f0;
}

.special {
  composes: base;
  border: 2px solid #000;
}

4.2 在React组件中使用组合样式

import React from 'react';
import styles from './styles.module.css';

const MyComponent = () => {
  return (
    <div className={styles.special}>
      <h1 className={styles.title}>Hello, CSS Modules!</h1>
    </div>
  );
};

export default MyComponent;

在这个例子中，.special 类会继承 .base 类的样式。

5. 总结

• CSS Modules 通过局部化类名来避免样式冲突。
• :global 选择器用于定义全局样式。
• 模板字符串 或 classnames 库 可以用于引用多个样式。
• composes 用于组合样式。

通过以上方法，你可以在React项目中有效地使用CSS Modules来实现样式的私有化和模块化。