vue组件样式覆盖

方式一:创建全局style覆盖

项目中的css文件被style-loader处理,最终打包后的文件放在style标签内,放到html中作为一个内部样式表。组件库的样式先于自定义样式引入。

javascript 复制代码
...
// 导入全局样式:在main.js中引入
import './styles/index.scss'
...

方式二:组件内样式隔离

React项目使用的是用的是CSS Module,Vue项目使用Scoped标记。保证样式只在当前文件生效。

原理

html 复制代码
<style scoped>
.myWrapper{
  border: 5px solid black
}
</style>
...
<div class="myWrapper" >
  <Calendar />
</div>
...

编译后添加了属性选择器

html 复制代码
<style>
.myWrapper[data-v-2fc5154c] {
  border: 5px solid black
}
</style>
<div class="myWrapper" data-v-2fc5154c>
  ...
</div>

用法

借助深度作用选择器,可以将>>>写成/deep/或者::v-deep。

react

见:react组件样式覆盖问题_react ts 样式会覆盖吗-CSDN博客

参考文档:如何优雅地覆盖组件库样式?-vue 覆盖组件样式

相关推荐
小雨下雨的雨4 小时前
井字棋AI机器人实现详解 - Minimax算法实战-鸿蒙PC Electron框架完成
前端·人工智能·算法·华为·electron·鸿蒙
ZC跨境爬虫7 小时前
跟着 MDN 学JavaScript day_7:数学运算与逻辑判断实战测试
开发语言·前端·javascript·学习·ecmascript
fangdengfu1237 小时前
ES分析系统各个服务日志占用量
java·前端·elasticsearch
凌云拓界8 小时前
文件管理:让AI安全操作你的电脑 ——CogitoAgent开发实战(三)
javascript·人工智能·架构·开源·node.js
凌云拓界8 小时前
联网能力:让AI看见更广阔的世界 ——CogitoAgent开发实战(四)
javascript·人工智能·架构·node.js·创业创新
JustHappy9 小时前
古法编程秘籍(六):程序到底是怎么跑起来的?从 IO 到中断,一次讲明白
前端·后端·全栈
HYCS9 小时前
用pixi.js实现fabric.js(六):从线性代数的角度理解编辑器交互
前端·javascript·canvas
卷帘依旧10 小时前
useImperativeHandle的作用
前端
卷帘依旧10 小时前
Hooks在Fiber上的存储原理
前端