react module.scss 避免全局冲突类似vue中scoped

创建 index.module.scss 文件

复制代码
src/
  components/
    MyComponent/
      index.module.scss
      index.tsx

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;
    }
  }
}

在 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 (
    <div
      className={classNames(styles.container, {
        [styles.active]: isActive, // 根据条件添加类名
      })}
    >
      <h1 className={styles.title}>Hello, World!</h1>
      <button className={styles.button}>Click Me</button>
    </div>
  );
};

export default MyComponent;
相关推荐
黄毛火烧雪下34 分钟前
React Context API 用于在组件树中共享全局状态
前端·javascript·react.js
三翼鸟数字化技术团队1 小时前
Vue自定义指令最佳实践教程
前端·vue.js
Spark2382 小时前
关于vue3整合tiptap的slash菜单的ts支持
vue.js
随笔记2 小时前
Flex布局下,label标签设置宽度依旧对不齐,完美解决(flex-shrink属性)
javascript·css·vue.js
fightingles2 小时前
使用useOptimistic优雅实现状态预更新
react.js
樊小肆2 小时前
实战!从 0 到 1 搭建 H5 AI 对话页面
前端·vue.js
小脑斧呀2 小时前
React 的挂载都发生了什么
react.js
JiangJiang2 小时前
揭秘Vue3源码之computed:懒计算与缓存机制全解析
前端·vue.js·面试
清灵xmf3 小时前
Vue 3 自定义权限指令 v-action
前端·javascript·vue.js·自定义指令
web_Hsir3 小时前
Uniapp 实现微信小程序滑动面板功能详解
vue.js·微信小程序·uni-app