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 的开头引入样式，这样的话就不存在覆盖的问题了
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了详解处理Vue单页面应用SEO的另一种思路，本文主要针对 vue 2.0 单页面 Meta SEO 优化展开介绍，非常具有实用价值，需要的朋友可以参考下2018-11-11
moment.js是一款现在对时间处理的强大的函数，这篇文章主要介绍了Vue 日期获取的示例代码，代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-01-01
这篇文章主要为大家详细介绍了vue如何安装使用Quill富文本编辑器，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-09-09
这篇文章主要介绍了Vue开发网站seo优化方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-05-05
footer为公用组件，其他页面都需要引入。接下来通过本文给大家分享vue项目中公用footer组件底部位置的适配问题,需要的朋友可以参考下2018-05-05
Vue简单封装axios之解决post请求后端接收不到参数问题
这篇文章主要介绍了Vue简单封装axios之解决post请求后端接收不到参数问题,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2020-02-02
Vue-cli Eslint在vscode里代码自动格式化的方法
本篇文章主要介绍了Vue-cli Eslint在vscode里代码自动格式化的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-02-02
最近在做小程序开发的时候，遇到了点问题。最终选择用mpvue来做，谁知这么多坑，下面小编把我遇到的问题分享给大家，如果大家对mpvue小程序仿qq左滑置顶删除组件相关知识感兴趣的朋友一起看看吧2018-08-08
Vue3.0将采用ES6 Proxy的形式重新实现Vue的变化检测，在官方还没给出新方法之前，我们先实现一个基于Proxy的变化检测。感兴趣的朋友跟随小编一起看看吧2019-06-06
这篇文章主要介绍了Vue 根据条件判断van-tab的显示方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
最新评论