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 覆盖组件样式

相关推荐
gAlAxy...10 分钟前
IntelliJ IDEA 四种项目构建:从普通 Java 到 Maven Web 项目
前端·firefox
my一阁12 分钟前
2025-web集群-问题总结
前端·arm开发·数据库·nginx·负载均衡·web
会飞的小妖14 分钟前
个人博客系统(十一、前端-简短的配置)
前端
念念不忘 必有回响2 小时前
nginx前端部署与Vite环境变量配置指南
前端·nginx·vite
JIngJaneIL2 小时前
篮球论坛|基于SprinBoot+vue的篮球论坛系统(源码+数据库+文档)
java·前端·数据库·vue.js·论文·毕设·篮球论坛系统
程序猿阿伟4 小时前
《首屏加载优化手册:Vue3+Element Plus项目提速的技术细节》
前端·javascript·vue.js
麦麦大数据4 小时前
D030知识图谱科研文献论文推荐系统vue+django+Neo4j的知识图谱|论文本文相似度推荐|协同过滤
vue.js·爬虫·django·知识图谱·科研·论文文献·相似度推荐
尘觉4 小时前
面试-浅复制和深复制?怎样实现深复制详细解答
javascript·面试·职场和发展
fruge5 小时前
Vue Pinia 状态管理实战指南
前端·vue.js·ubuntu
绝无仅有5 小时前
某教育大厂面试题解析:MySQL索引、Redis缓存、Dubbo负载均衡等
vue.js·后端·面试