vue+iview 样式穿透-修改第三方插件样式

修改第三方插件样式

方法一：
在以前没有用深度选择器的时候，当想修改第三方插件样式时，通常做法都是在公共样式表文件中，加一个.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>

官网链接