CSS Module

CSS Module

什么是 CSS Module?

CSS Modules 不是官方规范或浏览器中的实现,而是构建步骤中的一个过程(在 Webpack 或 Browserify 的帮助下),它改变了类名和选择器的作用域(即有点像命名空间)。

目的:解决 CSS 中全局作用域的问题

开启 CSS Module

在 React 中默认开启了 CSS Module,样式表文件需要以 xxx.module.sass/less/css 命名。

作用域

默认Less或者CSS的规则是全局生效的,任何一个组件,只要有同名的className就会共用样式。

CSS Module可以有效避免作用域问题,它会生成一个唯一的标识作为className

全局作用域(:global)

修改第三方组件样式

:global(), 保证包裹的变量不受影响

如果我们想要修改第三方组件样式,默认情况通过css-module无法修改,需要添加:global才可以。

css 复制代码
.login {
  height: 100vh;
  background: url(/imgs/login_bg.jpeg) no-repeat;
  background-size: cover;
  background-position: center;
  :global(.title) {
    font-size: 42px;
    line-height: 1.5;
    text-align: center;
    margin-bottom: 30px;
  }
  :global(.ant-btn-primary) {
    background-color: red;
  }
}
相关推荐
paopaokaka_luck2 小时前
基于SpringBoot+Uniapp的健身饮食小程序(协同过滤算法、地图组件)
前端·javascript·vue.js·spring boot·后端·小程序·uni-app
患得患失9493 小时前
【前端】【vscode】【.vscode/settings.json】为单个项目配置自动格式化和开发环境
前端·vscode·json
飛_3 小时前
解决VSCode无法加载Json架构问题
java·服务器·前端
YGY Webgis糕手之路6 小时前
OpenLayers 综合案例-轨迹回放
前端·经验分享·笔记·vue·web
90后的晨仔6 小时前
🚨XSS 攻击全解:什么是跨站脚本攻击?前端如何防御?
前端·vue.js
Ares-Wang6 小时前
JavaScript》》JS》 Var、Let、Const 大总结
开发语言·前端·javascript
90后的晨仔6 小时前
Vue 模板语法完全指南:从插值表达式到动态指令,彻底搞懂 Vue 模板语言
前端·vue.js
德育处主任6 小时前
p5.js 正方形square的基础用法
前端·数据可视化·canvas
烛阴6 小时前
Mix - Bilinear Interpolation
前端·webgl
90后的晨仔6 小时前
Vue 3 应用实例详解:从 createApp 到 mount,你真正掌握了吗?
前端·vue.js