自定义主题
Element Plus 使用 BEM 风格的 CSS，所以你可以很简单地覆盖样式。 但是如果你需要大范围地替换样式，例如，把主题色从蓝色改成橘色或绿色，也许一个一个地覆盖它们不是一个好主意。
我们提供了四种方法来改变样式变量。
改变主题色
这些是关于自定义主题的示例。
通过 SCSS 变量
theme-chalk 是用 SCSS 编写的。 您可以在 packages/theme-chalk/src/common/var.scss 中找到 SCSS 变量。
警告
我们使用 sass 模块 (sass:map ...) 和 @use 来重构所有的 SCSS 变量。通过对所有 SCSS 变量使用 @use，它解决了 @import 造成的重复输出问题。
例如，我们使用 $colors 作为一个 map 来保存不同类型的颜色。
$notification 是一个 map，其中包含 notification 组件的所有变量。
将来，我们会为每个组件可以自定义的变量编写文档。 您也可以直接查看源码 var.scss。
$colors: () !default;
$colors: map.deep-merge(
(
'white': #ffffff,
'black': #000000,
'primary': (
'base': #409eff,
),
'success': (
'base': #67c23a,
),
'warning': (
'base': #e6a23c,
),
'danger': (
'base': #f56c6c,
),
'error': (
'base': #f56c6c,
),
'info': (
'base': #909399,
),
),
$colors
);如何覆盖它？
如果你的项目也使用了 SCSS，你可以直接修改 Element Plus 的样式变量。 创建一个新的样式文件，例如 styles/element/index.scss
警告
你应该使用 @use 'xxx.scss' as *; 而不是 @import 'xxx.scss';。
因为 sass 团队表示他们最终会移除 @import。
/* just override what you need */
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
$colors: (
'primary': (
'base': green,
),
)
);
// If you just import on demand, you can ignore the following content.
// if you want to import all styles:
// @use "element-plus/theme-chalk/src/index.scss" as *;然后在你的项目入口文件中，导入这个样式文件，而不是 Element 的内置 CSS
提示
在 element-plus 的 scss 之前导入 element/index.scss，以避免 sass 混合变量的问题，因为我们需要用你自定义的变量来生成 light-x。
创建一个 element/index.scss 来合并你的变量和 element-plus 的变量。(如果你在 ts 中导入它们，它们将不会被合并。)
提示
另外，你应该将你的 scss 和 element 变量的 scss 区分开。如果它们混合在一起，每次 element-plus 的热更新都需要编译大量的 scss 文件，导致速度变慢。
import { createApp } from 'vue'
import './styles/element/index.scss'
import ElementPlus from 'element-plus'
import App from './App.vue'
const app = createApp(App)
app.use(ElementPlus)如果你正在使用 vite，并且希望在按需导入时自定义主题。
使用 scss.additionalData 将变量与每个组件的 scss 一起编译。
import path from 'path'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// You can also use unplugin-vue-components
// import Components from 'unplugin-vue-components/vite'
// import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// or use unplugin-element-plus
import ElementPlus from 'unplugin-element-plus/vite'
export default defineConfig({
resolve: {
alias: {
'~/': `${path.resolve(__dirname, 'src')}/`,
},
},
css: {
preprocessorOptions: {
scss: {
additionalData: `@use "~/styles/element/index.scss" as *;`,
},
},
},
plugins: [
vue(),
// use unplugin-vue-components
// Components({
// resolvers: [
// ElementPlusResolver({
// importStyle: "sass",
// // directives: true,
// // version: "2.1.5",
// }),
// ],
// }),
// or use unplugin-element-plus
ElementPlus({
useSource: true,
}),
],
})如果你正在使用 webpack，并且希望在按需导入时自定义主题。
// use unplugin-element-plus
import ElementPlus from 'unplugin-element-plus/webpack'
export default defineConfig({
css: {
loaderOptions: {
scss: {
additionalData: `@use "~/styles/element/index.scss" as *;`,
},
},
},
plugins: [
ElementPlus({
useSource: true,
}),
],
})通过 CSS 变量
CSS 变量是一个非常有用的特性，几乎所有浏览器都已支持。(IE: 等等？)
从 使用 CSS 自定义属性（变量） | MDN 了解更多
我们已经使用 css 变量重构了几乎所有组件的样式系统。
提示
它与 SCSS 变量系统兼容。我们使用 SCSS 的功能来自动生成 css 变量以供使用。
这意味着您可以动态更改组件内部的单个变量，以更好地自定义它，而无需修改 scss 并重新编译。
将来，每个组件的 css 变量名称和作用文档将写入每个组件中。
像这样
:root {
--el-color-primary: green;
}如果你只想自定义某个特定组件，只需为某些组件单独添加内联样式即可。
<el-tag style="--el-tag-bg-color: red">Tag</el-tag>出于性能原因，更推荐在类下自定义 css 变量，而不是在全局的 :root 下。
.custom-class {
--el-tag-bg-color: red;
}如果你想通过脚本控制 css var，试试这个
// document.documentElement is global
const el = document.documentElement
// const el = document.getElementById('xxx')
// get css var
getComputedStyle(el).getPropertyValue(`--el-color-primary`)
// set css var
el.style['--el-color-primary'] = 'red'如果你想要一种更优雅的方式，请查看这个。 useCssVar | VueUse