Vue模板内引入的组件样式覆盖失效原因及解决
模板内引入组件样式覆盖失效
作为一名刚接触Vue的菜鸟, 开发过程中遇到一些小坑又很难搜索的到, 还是记录下来. 分享给有遇到过类似问题的人.
Vue项目中假设用到Vant.js这个UI库, 具体引入组件啥的我就不详细说了, 直接看代码:
<template>
<div class="login">
<my-btn type="default">{{msg}}</my-btn>
</div>
</template><script>
import { Button } from 'vant'
export default {
name: 'App',
components: {
myBtn: Button
},
data() {
return {
msg: 'whidy is poor XD'
}
}
}
</script><style scoped>
.van-button {
width: 600px;
}
.van-button__text {
font-size: 40px;
}
</style>以上代码的写法不仔细看的话, 通过页面来看, my-btn组件实际上是Button, 而Vant的Button会生成类似如下:
<button data-v-0f984ad8="" class="van-button van-button--default van-button--normal"><!----><span class="van-button__text">whidy is poor XD</span></button>
其中的van-button的确宽度变成600px了, 而这个van-button__text却没有反应. 似乎一下子就傻眼了. 去掉scoped才有效果, 可是为啥要把这个作用域去了才行. 这个不符合我们需求, 因为这样会造成全局污染. 我仅仅是想要在这个页面中的按钮文本字体发生改变!
问题原因
scoped是必不可少的, 但是我写了这个样式为何无法生效? 原因很简单, 因为当前样式仅适用于当前Vue模板的, 而模板中引入的其他组件其实是无法被渲染的.
解决方案
因此对于模板中引入第三方UI框架的样式如何改写, 正确方式是写一个优先级高于原组件的全局样式来覆盖默认样式, 比如
<my-btn type="default" class="reset">{{msg}}</my-btn>完整的代码如下
<template>
<div class="login">
<my-btn type="default" class="reset">{{msg}}</my-btn>
</div>
</template><script>
import { Button } from 'vant'
export default {
name: 'App',
components: {
myBtn: Button
},
data() {
return {
msg: 'whidy is poor XD'
}
}
}
</script><style scoped>
.van-button {
width: 600px;
}
</style>
<style>
.reset .van-button__text {
font-size: 40px;
}
</style>当然这里只是示例, 个人并不建议在模板上写多个style块, 所以我的做法一般还是在assets目录内新建一个例如resetui.css文件, 专门存放这些需要被重新修改的样式代码. 并且以组件的类名来进行维护, 比如上面一段, 最后处理好的代码应该是引入一个全局resetui.css, 并且该文件内的样式(我用了PostCSS)例如:
.login {
.van-button__text {
font-size: 40px;
}
}这样就很好的解决了作用域和组件样式的问题了, 因此理解Vue模板和组件之间的作用域也是至关重要的~
其实这部分内容在官方文档有写, 不过大部分新手在阅读文档后, 并没有真正实践, 所以也就很容易忽略, 这里简单的做了个总结, 希望大家能够注意哦~
我其实也很想能够做到, 当前模版内的scoped样式能够生效于当前模版内的所有组件的办法, 不过似乎是做不到的? 因此目前还是暂时按照上面的解决方案处理吧~
参阅: 官方文档 - Class与Style绑定 - 用在组件上
vue样式被覆盖问题
在我们引入外部的样式时，发现自己无论如何都改不了外部的样式，自己的样式老被覆盖，究其原因还是我们的 外部样式放的位置不对
main.js
我们应该在 main.js 的开头引入样式，这样的话就不存在覆盖的问题了
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家介绍了VUE3+TS递归组件实现TreeList设计实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
这篇文章主要介绍了详解Vue中Axios封装API接口的思路及方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-10-10
这篇文章主要介绍了vue实现微信浏览器左上角返回按钮拦截功能,本文通过实例代码相结合的形式给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2020-01-01
vue contextmenujs鼠标右键菜单高度不够显示不全的问题及解决方法
这篇文章主要介绍了使用vue-contextmenujs鼠标右键菜单时，当高度不够时显示不全的问题,大家需要注意本文给提供的解决方案虽然能够解决现有问题，但是如果组件升级了，想要使用最新升级后的组件，还要再次修改代码，需要的朋友可以参考下2022-07-07
本篇文章主要介绍了详解vue-cli + webpack 多页面实例应用，具有一定的参考价值，有兴趣的可以了解一下2017-04-04
解决elementui中NavMenu导航菜单高亮问题(解决多种情况)
这篇文章主要介绍了解决elementui中NavMenu 导航菜单高亮问题(解决多种情况)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
这篇文章主要介绍了Vue项目数据动态过滤实践,，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-09-09
这篇文章主要介绍了vue3 使用setup语法糖实现分类管理,本次模块使用 vue3+element-plus 实现一个新闻站的后台分类管理模块，其中新增、编辑采用对话框方式公用一个表单，需要的朋友可以参考下2022-08-08
最近在做一个类似课程表的需求,需要自制一个日历来支持功能及展现,就顺便研究一下应该怎么开发日历组件,下面这篇文章主要给大家介绍了关于如何基于vue2实现一个日历组件的相关资料,需要的朋友可以参考下2022-12-12
这篇文章主要介绍了Vue 组件如何模块化抽离Props的相关知识,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2023-11-11
最新评论