html引入iview如何修改样式,element-ui,iview组件样式修改，框架自带样式修改,/deep/击穿...

项目中经常要修改框架自带的样式，但是写style，却没有效果

方法一：给组件加id / class，在style一面直接修改，注意style不要加scoped,vue可以有多个style

结构：

选择日期:

至

添加

{{item.time}}

样式：

#noAssessmentDate .ivu-modal {

width: 686px !important;

}

#noAssessmentDate .ivu-tag {

width: 105px;//修改tag的宽度

}

#noAssessmentDate .ivu-icon-ios-close-empty:before {

color: red; //红x

}

效果：

方法二：

利用深度/deep/深度修改组建的样式，可以直接写在到scoped作用域的style里面。(推荐)

结构：

样式：

#tab_keyTag /deep/ .ivu-table .ivu-table-header .ivu-checkbox {

display: none;

cursor: none;

}

#tab_keyTag /deep/ .ivu-table .ivu-table-header label:after {

content: "选择";

}

#tab_keyTag /deep/ .ivu-table .ivu-table-header .ivu-checkbox-wrapper {

cursor: default;

pointer-events: none;

}

关于/deep/，一张图看懂：

看效果：