修改第三方插件样式
方法一:
在以前没有用深度选择器的时候,当想修改第三方插件样式时,通常做法都是在公共样式表文件中,加一个.zujian-parent-class .disanfang-class来修改。
例如我想修改iview单元格样式:
common.styl文件中这样写
.first-table .ivu-table-cell
padding-left: 10px;
方法二:
和方法一差不多的还可以在组件内写一个无scoped的
<style lang="stylus">
/*此处写覆盖样式*/
.first-table .ivu-table-cell
padding-left: 10px;
</style>
<style lang="stylus" scoped>
/*此处写局部样式*/
</style>
方法三:
用深度选择器形成样式穿透是一个更好的选择,这样不用担心同名类造成样式污染
page.vue组件中
<style lang="stylus" scoped>
/*样式穿透 可以使用/deep/ >>> ::v-deep
具体使用哪个根据不同的语言、版本以及webpack版本(webpack2.X的一般不能用 >>>)有所不同 */
.first-table /deep/ .ivu-table-cell {
height: 37px;
line-height:37px;
}
</style>
官网链接
注意:/deep/ >>> ::v-deep 注意事项:
组件内部类无法穿透成功。
例如下单菜单组件,最外层的.ivu-dropdown可以,但是其下一层.ivu-dropdown-rel是无法穿透的。
经验证,以ivewui为例,组件最外层的类都是可以的,但是组件内部的类通过第三种方法有些是无法生效的。其实这也是根据具体组件的加载先后决定的。