关于elementUI scope 设置th样式

2018-09-27 14:53 热度: 81 我说呢
vueloader

关于这个问题,困扰了有一段时间了,上次写东西就发现了这个问题,当时比较着急就写了全局的样式,后来给忘了(惭愧.gif)。

今天看了下官网,里面专门有对scoped的css的说明vue-loader官网

下面说明下原因:

使用scoped后的style标签会在vue-loader里进行处理。这里所谓的局部样式就是在你当前组件里的所有html标签打一个data-tag。

例如,如果你在vue文件中这样编写css:

<style lang='stylus' scoped>
    .home {
        .el-table th .cell {
            background-color: red;
        }
    }
</style>

编译后的css样式如下:

.home .el-table th .cell[data-v-03b663c3] {
  background-color: red;
}

然后在elementUI中el-table中你的一个子组件,vue-loader在编译中对于子组件只对子组件的根元素打上tag,不会对th以及之下的div.cell打上tag,所以样式寻找中找不到这个,那就注定不生效了。

使用 scoped 后,父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件的 scoped CSS 和子组件的 scoped CSS 的影响。这样设计是为了让父组件可以从布局的角度出发,调整其子组件根元素的样式 --- 来自vue-loader官网

解决方法

深度作用选择器

如果你希望 scoped 样式中的一个选择器能够作用得“更深”,例如影响子组件,你可以使用 >>> 操作符:

<style scoped>
.a >>> .b { /* ... */ }
</style>

编译后:

.a[data-v-f3f3eg9] .b { /* ... */ }

搞定。。

查看评论 (0条)

添加评论