更改ElementPlus默认样式的方法

更改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)');
})