scss__0">创建 index.module.scss 文件

src/components/MyComponent/index.module.scssindex.tsx

scss__8">2. 编写 index.module.scss 内容

// src/components/MyComponent/index.module.scss.container {padding: 20px;background-color: #f0f0f0;.title {font-size: 24px;color: #333;}.button {background-color: #007bff;color: white;padding: 10px 20px;border: none;border-radius: 5px;&:hover {background-color: #0056b3;}}
}

scss_34">在 React 组件中使用 index.module.scss

import React from 'react';
import styles from './index.module.scss'; // 引入样式文件const MyComponent: React.FC = () => {return (<div className={styles.container}><h1 className={styles.title}>Hello, World!</h1><button className={styles.button}>Click Me</button></div>);
};export default MyComponent;

CSS 模块化的优势

• 局部作用域：样式只作用于当前组件，不会影响其他组件。
• 避免命名冲突：CSS 模块会自动生成唯一的类名，避免全局样式冲突。
• 支持 SCSS 语法：可以使用嵌套、变量、混合等 SCSS 特性。

如果需要根据条件动态添加类名，可以使用模板字符串或 classnames 库

import React from 'react';
import styles from './index.module.scss';
import classNames from 'classnames'; // 引入 classnames 库const MyComponent: React.FC<{ isActive: boolean }> = ({ isActive }) => {return (<divclassName={classNames(styles.container, {[styles.active]: isActive, // 根据条件添加类名})}><h1 className={styles.title}>Hello, World!</h1><button className={styles.button}>Click Me</button></div>);
};export default MyComponent;