react module.scss 避免全局辩论类似vue中scoped

创建 index.module.scss 文件

1. src/
2.   components/
3.     MyComponent/
4.       index.module.scss
5.       index.tsx

复制代码

2. 编写 index.module.scss 内容

1. // src/components/MyComponent/index.module.scss
3. .container {
4.   padding: 20px;
5.   background-color: #f0f0f0;
7.   .title {
8.     font-size: 24px;
9.     color: #333;
10.   }
12.   .button {
13.     background-color: #007bff;
14.     color: white;
15.     padding: 10px 20px;
16.     border: none;
17.     border-radius: 5px;
19.     &:hover {
20.       background-color: #0056b3;
21.     }
22.   }
23. }

复制代码

在 React 组件中使用 index.module.scss

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

复制代码

CSS 模块化的优势

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

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

1. import React from 'react';
2. import styles from './index.module.scss';
3. import classNames from 'classnames'; // 引入 classnames 库
5. const MyComponent: React.FC<{ isActive: boolean }> = ({ isActive }) => {
6.   return (
7.     <div
8.       className={classNames(styles.container, {
9.         [styles.active]: isActive, // 根据条件添加类名
10.       })}
11.     >
12.       <h1 className={styles.title}>Hello, World!</h1>
13.       <button className={styles.button}>Click Me</button>
14.     </div>
15.   );
16. };
18. export default MyComponent;

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。