[新手坑] 01.Vue模板内引入的组件样式覆盖失效

[新手坑] 01.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-cli, 我在GitHub上建了一个 vue-cli-mobile-study项目, 用于记录一些小技巧和坑, 其中记录过程当中若是有问题, 也但愿你们指出包涵~

下期: 02.Vue开发环境和生产环境样式不一致的问题