这样修改element UI组件的样式,又不会污染全局
想要修改element组件的样式,试过一下的三种方法:
1、在style外面另写个style;
2、在组件上加个id或者class定位,然后用 .yourClass /deep/ .element组件样式 修改,会全局污染;
3、将要修改的样式在外面写个单独样式文件,在需要用到的页面引入。
以上三种方法均会引起全局样式污染的问题,正确方法如下:
采用定位组件的方法,通过组件外层的class或id定位,使用 >>> 进行样式穿透
组件HTML:
<div class="block">
<span class="demonstration">默认</span>
<el-date-picker
v-model="value1"
type="date"
placeholder="选择日期">
</el-date-picker>
</div>
在style 中书写需要修改的样式
<style scoped>
.block >>> .el-date-table td{
padding:0;
}
.block >>> .el-date-table th{
font-size:12px;
padding:0;
}
</style>