当前位置: 首页 > article >正文

CSS Module

CSS Module的作用:将CSS样式作用域限制在特定的组件范围内,以避免全局样式污染和命名冲突。                                                                                                                                

 Vue中如何实现样式模块化

通过在<style>标签中添加scoped属性,可以实现样式的局部作用域

React中如何实现样式模块化

1、创建 xxx.module.less/scss/css文件,在此文件中编写样式代码

举例:login.module.less

.login {
  height: 100%;
  width: 100%;
  background: lightgray;
  .loginWrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

2、使用

这样在别的组件中设置className=“login”时样式也不会被污染。

tips:如果想在xxx.module.less中定义的属性和别的组件公用,需要用:global(.className)保护起来,比如我这里有个titleName设置了字体红色,


http://www.kler.cn/a/271757.html

相关文章:

  • 最新-CentOS 7 基于1 Panel面板安装 JumpServer 堡垒机
  • 深入探讨:服务器如何响应前端请求及后端如何查看前端提交的数据
  • Linux环境基础开发工具的使用(apt, vim, gcc, g++, gbd, make/Makefile)
  • 【单细胞第二节:单细胞示例数据分析-GSE218208】
  • 本地部署deepseek模型步骤
  • 27.useFetch
  • 聊聊Python都能做些什么
  • 应对磁盘管理挑战:Linux磁盘分区挂载命令实践指南
  • Linux系统之部署Hextris网页小游戏
  • 使用 Docker Compose 快速搭建监控网站 uptime-kuma
  • 【网络编程基础(一)】网络基础和SOCKET
  • 代码规范工具
  • Rust学习02:推荐一本入门书,免费的
  • 封装哈希表
  • MySQL之旅
  • jeecg 启动 微服务 更改配置本地host地址
  • 使用公式在Excel中指定列值的变化实现自动间隔着色(不是按照固定的行数)
  • SpringMVC拦截器的作用及使用方法
  • 【蓝桥杯选拔赛真题66】python字符串后两个字符 第十五届青少年组蓝桥杯python选拔赛真题 算法思维真题解析
  • QT 状态机的使用
  • mvcc介绍
  • 海外媒体宣发套餐推广攻略轻松提升曝光率标题文章-华媒舍
  • android读取sd卡上文件中的数据
  • WorkPlus行政单位内部即时通讯软件的最佳解决方案
  • Redisinsight默认端口改成5540了!网上的8001都是错误的
  • Python实现图片素描效果生成器