开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第6天，点击查看活动详情

写在前面

前面我们已经介绍过elementplus的安装和组件的使用，除了这些之外，由于elementplus的默认样式往往和我们需要的样式不一样，因此修改组件的默认样式就显得特别重要了。这篇文章主要介绍修改组件默认样式的一些方法。

使用不带scoped的全局样式

学过vue的都知道，带有scoped的样式是当前作用域样式，不带scoped的就是全局样式了。那么，我们就可以通过修改组件的类的样式达到修改组件默认样式的效果。

实现方式

<el-date-picker
  v-model="value"
  type="date"
  placeholder="Pick a date"
  :disabled-date="disabledDateFunc"
/>

默认效果

修改默认样式

<style>
.el-date-picker__header-label {
  color: red !important;
}
</style>

效果如下：

注意

这样修改组件的样式会全局生效，而且很多时候有优先级的问题，需要更改优先级才能生效，比如上面代码中的 !important。

使用场景

1. 不支持给组件增加额外样式属性也不能通过deep去获取的时候
2. 需要修改组件在全局中的样式

使用deep

很多时候我们修改组件的默认样式时并不像全局生效，而是只想给某个地方修改默认样式，这时候就适合使用deep的方式了。

实现方式

<el-date-picker
  v-model="value"
  type="date"
  placeholder="Pick a date"
  :disabled-date="disabledDateFunc"
/>

默认效果

修改默认样式

<style scoped>
::v-deep .el-date-editor {
  width: 400px !important;
  height: 300px !important;
}
</style>

效果如下：

注意

有些样式不支持这种修改方式。

使用场景

1. 需要给某个单独的页面修改组件的默认样式

其他的deep符号

1. >>> : 只作用于css，对于less和scss不起作用，如果是less和scss的话需要用到/deep/或::v-deep
2. /deep/: 在vue3.0之前可使用，例如(复写样式前加/deep/)，vue3.0及后使用就会报错
3. ::v-deep: 在vue3.0及后使用，替代/deep/
4. :deep()：在vue3.0及后使用，替代/deep/

修改elementplus的主题样式

elementplus中的组件通过查看样式，会发现有很多属性值是像下面这种带var的变量值，也就是说在内部是通过修改变量来改变样式的，我们也可以通过修改这些变量重新修改主题样式。

实现方式

在app.vue中添加如下代码

onMounted(() => {
  document.body.style.setProperty('--el-text-color-primary', 'rgba(142, 193, 205, 1)');
  document.body.style.setProperty('--el-text-color-regular', 'rgba(142, 193, 205, 1)');
  document.body.style.setProperty('--el-fill-color-blank', 'transparent');
  document.body.style.setProperty('--el-bg-color-overlay', 'rgba(9, 53, 57, 0.95)');
  document.body.style.setProperty('--el-color-primary', 'rgba(24, 149, 142, 1)');
  document.body.style.setProperty('--el-border-color-extra-light', 'rgba(24, 149, 142, 0.1)');
  document.body.style.setProperty('--el-disabled-bg-color', 'rgba(24, 149, 142, 0.1)');
  document.body.style.setProperty('--el-disabled-border-color', 'rgba(24, 149, 142, 0.1)');
  document.body.style.setProperty('--el-border-color', 'rgba(12, 105, 115, 1)');
  document.body.style.setProperty('--el-border-color-light', 'rgba(50, 205, 220, 1)');
  document.body.style.setProperty('--el-border-color-lighter', 'rgba(12, 105, 115, 1)');
  document.body.style.setProperty('--el-fill-color-light', 'rgba(15, 83, 95, 1)');
})

效果如下：

注意

上述修改是会全局生效的

使用场景

1. 修改修改组件整体的主题色