如何正确修改element组件样式

2024-04-24 23:48:38| 来源: 网络整理

需求：

想要修改element时间选择器的样式，试过三种方法：1、在style外面另写个style；2、在组件上加个id或者class定位，然后用 .yourClass /deep/ .element组件样式修改，会全局污染；3、将要修改的样式在外面写个单独样式文件，在需要用到的页面引入。

以上三种方法均会引起全局样式污染的问题，正确方法如下：

采用定位组件的方法，通过组件外层的class或id定位，使用 >>> 进行样式穿透。页面组件：

样式定位：

/* 这里是element时间选择器的公共样式 */.dateRange >>> .el-date-table td { padding: 0;}.dateRange >>> .el-date-range-picker__content { padding: 10px;}.dateRange >>> .el-date-table th { font-size: 12px; padding: 0;}.dateRange >>> .el-date-range-picker__header div { font-size: 14px;}.dateRange >>> .el-date-editor .el-range-input { width: 70px; color: #f0f8ff; background: #01131b;}

其中，dateRange 是组件外层的div的class。

就是他妈的这么简单

【本文地址】转载请注明　