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

ITPOW2019/11/28 21:49:28

在 Vue 中，关于样式有几个规范：

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

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

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

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

于是我们写样式：

<style lang="less" scoped> .van-grid-item { border:1px solid red; } .van-grid-item .van-grid-item__content { background:#f00; color:#fff; } </style>

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

/deep/ .van-grid-item .van-grid-item__content { background:#f00; color:#fff; }

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