React第二十八章(css modules)

css modules

什么是 css modules

因为 React 没有Vue的Scoped,但是React又是SPA(单页面应用),所以需要一种方式来解决css的样式冲突问题,也就是把每个组件的样式做成单独的作用域,实现样式隔离,而css modules就是一种解决方案,但是我们需要借助一些工具来实现,比如webpackpostcsscss-loadervite等。

如何在Vite中使用css modules

css modules,可以配合各种css预处理去使用,例如lesssassstylus等。

sh 复制代码
npm install less -D # 安装less 任选其一
npm install sass -D # 安装sass 任选其一
npm install stylus -D # 安装stylus 任选其一

在Vite中css Modules 是开箱即用的,只需要把文件名设置为xxx.module.[css|less|sass|stylus],就可以使用css modules了。

  • src/components/Button/index.module.scss
css 复制代码
.button {
  color: red;
}
  • src/components/Button/index.tsx
tsx 复制代码
//使用方法,直接引入即可
import styles from './index.module.scss';

export default function Button() {
  return <button className={styles.button}>按钮</button>;
}
  • 编译结果, 可以看到button类名被编译成了button_pmkzx_6,这就是css modules的实现原理,通过在类名前添加一个唯一的哈希值,来实现样式隔离。
html 复制代码
<button class="button_pmkzx_6">按钮</button>

修改css modules 规则

  • 在vite.config.ts中配置css modules的规则
ts 复制代码
export default defineConfig({
  css: {
    modules: {
      localsConvention: 'dashes', // 修改css modules的类名规则 可以改成驼峰命名 或者 下划线命名
      generateScopedName: '[name]__[local]___[hash:base64:5]', // 修改css modules的类名规则
    },
  },
});

例子 例如设置为(localsConvention:camelCaseOnly)驼峰命名

  • src/components/Button/index.module.scss
scss 复制代码
.button-red {
  color: red;
}
  • src/components/Button/index.tsx

设置为驼峰之后,使用的时候需要使用驼峰命名,例如buttonRed,而不是button-red

tsx 复制代码
import styles from './index.module.scss';

export default function Button() {
  return <button className={styles.buttonRed}>按钮</button>;
}

例子 例如设置为(localsConvention:dashes)原始命名也就是-连接的命名

  • src/components/Button/index.module.scss
scss 复制代码
.button-red {
  color: red;
}
  • src/components/Button/index.tsx

设置为原始命名之后,使用的时候需要使用-连接的命名,例如button-red,而不是buttonRed

tsx 复制代码
import styles from './index.module.scss';

export default function Button() {
  return <button className={styles['button-red']}>按钮</button>;
}

如果想同时支持驼峰命名和-连接的命名,可以设置为localsConvention:camelCase,这样就可以同时支持驼峰命名和-连接的命名。

例子 修改css modules的类名规则

  • 在vite.config.ts中配置css modules的规则
ts 复制代码
export default defineConfig({
  css: {
    modules: {
        generateScopedName: '[local]_[hash:base64:5]' // 只保留类名和哈希值
        // 或者
        generateScopedName: '[hash:base64:8]' // 只使用哈希值
        // 或者
        generateScopedName: '[name]_[local]' // 只使用文件名和类名,没有哈希
        // 或者
        generateScopedName: '[local]--[hash:base64:4]' // 自定义分隔符
    },
  },
});

编译结果

html 复制代码
<button class="button_pmkzx_6">类名 + 哈希值</button>
<button class="pmkzx_6">哈希值</button>
<button class="index-module_button">文件名 + 类名</button>
<button class="button--pmkzx_6">类名 + 分隔符 + 哈希值</button>

维持类名

意思就是说在样式文件中的某些样式,不希望被编译成css modules,可以设置为global,例如:

scss 复制代码
.app{
    background: red;
    width: 200px;
    height: 200px;
    :global(.button){
        background: blue;
        width: 100px;
        height: 100px;
    }
}
tsx 复制代码
//在使用的时候,就可以直接使用原始的类名 button
import styles from './index.module.scss';
const App: React.FC = () => {
  return (
    <>
      <div className={styles.app}>
        <button className='button'>按钮</button>
      </div>
    </>
  );
}
相关推荐
m0_741412244 分钟前
大文件上传与文件下载
前端
wu_jing_sheng05 分钟前
Python中使用HTTP 206状态码实现大文件下载的完整指南
开发语言·前端·python
90后的晨仔10 分钟前
Vue3项目全面部署指南:从构建到上线
前端·vue.js
小于小于091219 分钟前
npx 与 npm 区别
前端·npm·node.js
望获linux37 分钟前
【实时Linux实战系列】实时 Linux 在边缘计算网关中的应用
java·linux·服务器·前端·数据库·操作系统
qq_2529241938 分钟前
PHP 8.0+ 现代Web开发实战指南 引
android·前端·php
Jeled38 分钟前
Android 本地存储方案深度解析:SharedPreferences、DataStore、MMKV 全面对比
android·前端·缓存·kotlin·android studio·android jetpack
Mintopia40 分钟前
🎨 AIGC 内容过滤技术:当创作的洪流遇上理性的堤坝
前端·javascript·aigc
Mintopia1 小时前
⚙️ Next.js 缓存与队列:当数据与请求跳起“低延迟之舞”
前端·全栈·next.js
Shi_haoliu1 小时前
Vue2 + Office Add-in关于用vue项目于加载项控制excel单元格内容(Demo版)
前端·javascript·vue.js·node.js·html·excel·office