更改ElementPlus默认样式的方法

最新推荐文章于 2025-06-30 12:52:36 发布

原创最新推荐文章于 2025-06-30 12:52:36 发布 · 1.5w 阅读

18 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

vue 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了如何更改ElementPlus组件库的默认样式，包括全局添加无scoped样式、使用深选择器（::v-deep）进行局部修改，以及修改主题颜色。通过在main.js中引入样式文件和修改CSS变量，可以实现个性化定制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

更改ElementPlus默认样式的方法

安装：

# 选择一个你喜欢的包管理器

# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

# pnpm
$ pnpm install element-plus

使用：

// main.js
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

更多详细内容移步官网

一、添加没有scoped的样式（页面中可以有多个）

需要注意的是，这里修改的样式是全局都生效的。

<style lang="scss">
.el-date-editor {
    box-shadow: none !important;
}
</style>
<style lang="scss" scoped>
/* 其他css代码 */
</style>

也可以定义公共的外部css，采用import的方式在main.js中引入即可。

import './assets/element.css';

/* element.css */
.el-date-editor {
    box-shadow: none !important;
}

二、使用`deep`

仅修改当前组件下的样式。

<style lang='scss' scoped>
::v-deep .el-date-editor {
    box-shadow: none !important;
}
</style>

三、修改部分主题色

这里修改的样式也是全局都生效的。
在APP.vue中下入以下代码即可生效。

import { onMounted } from 'vue'
// 该示例为修改`el-date-picker`时间选择器的颜色主题所需修改的颜色
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)');
})