Vue 中用 /deep/ 解决样式不生效

作者:vkvi 来源:千一网络(原创) 日期:2019-11-28

在 Vue 中,关于样式有几个规范:

  • 一是样式写在文件的最后。
  • 二是使用 class,而不直接为标签名称写样式。
  • 三是要 scoped

尤其是 scoped 很重要,因为 Vue 并不是我们传统的一个页面一个页面的文件,如果不 scoped,会发生样式干扰。

假如我们使用了一个 van-grid-item 组件,我们通过检查,发现生成 HTML 的结构是:

  • 外层 div 套了一个内层 div。
  • 外层 div 的 class 是:van-grid-item。
  • 内层 div 的 class 是:van-grid-item__content。

于是我们写样式:

我们会发现第一个生效了,但是第二个没生效,这是因为 Vue 只认组件本身那层 class,其内部继续产生的 class 是不认的,怎么解决呢?加上 /deep/ 让其作用域往下钻,如下:

注意:Vue 中<style lang="less" scoped=""> 是正确的写法,<style type="less" scoped> 是错误的写法。

相关文章
文章评论