ElementUI - 定制（自定义）全部组件主题及颜色配置（更改整套组件样式及主题）

╰半夏微凉° 2022-10-13 05:19 1321阅读 0赞

## 前言 ##

如果你的项目基于 `ElementUI`，但设计师给你的界面，与 `ElementUI` 默认的组件主题色与颜色不符合。

**例如，框架默认的主题色是蓝色，而我的项目默认主题色是红色，如下图所示：**

![在这里插入图片描述][20210706153200510.png]![在这里插入图片描述][20210706153124123.png]  
这样就存在一个问题，如果使用 `/deep/` 覆盖样式的话，显然不是明智之举（因为全部用到的样式都需要进行覆盖，繁琐不说还拖慢渲染性能）。

虽然网上有很多覆盖样式的解决方案，但都不推荐使用，因为 **`ElementUI` 提供给了开发者定制样式及主题的方案。**

--------------------

## 第一步：定制主题 ##

> 官方定制主题传送门：[https://element.eleme.cn/\#/zh-CN/theme][https_element.eleme.cn_zh-CN_theme]

打开官方网站，点击如下图所示 **查看**：  
![在这里插入图片描述][20210706153949480.png]  
下图所示界面，便是 `ElementUI` 定制主题及组件样式的界面：  
![在这里插入图片描述][20210706154208206.png]  
你可以对 **全部组件** 或 **单个组件** 进行样式的配置，如下图所示：  
![在这里插入图片描述][20210706154441416.png]

在该界面配置好的样式及主题，可直接应用到你的项目中（所见所得）。

## 第二步：下载主题 ##

> 配置好了组件样式或主题，我们可以进行下载，然后应用到项目中。

**一、点击如下图所示，下载按钮：**  
![在这里插入图片描述][20210706154639830.png]  
**二、将下载的 `style.zip` 解压出来，如下图所示：**

> 注意：`config.json` 无用，可以直接删掉，保留 `theme` 文件夹。

![在这里插入图片描述][20210706154752748.png]  
**三、将 `theme` 文件夹拖拽到项目的根目录，如下图所示：**

![在这里插入图片描述][2021070615495423.png]  
`theme` 文件夹下包含：  
![在这里插入图片描述][20210706155007722.png]  
**四、在 `main.js` 中引入 `theme` 文件夹下的 `index.css`，如下图所示：**

![在这里插入图片描述][20210706155306732.png]

## 第三步：测试 ##

> 提示：此时 `ElementUI` 官方的示例组件，也变成了你自定义的颜色。

阅读组件文档，像平常一样正常放置你的组件，你会发现默认的组件变成了你自定义的颜色。  
![在这里插入图片描述][20210706155721933.png]

## 写在后面 ##

`ElementUI` 会保留你的主题定制，也就是说你可以随时进行主题的更改，如下图所示：  
![在这里插入图片描述][20210706155605207.png]  
记得每次更改完后，下载并重新按照步骤 **替换** 项目中的 `theme` 文件夹。

[20210706153200510.png]: https://img-blog.csdnimg.cn/20210706153200510.png
[20210706153124123.png]: /images/20221005/f857f6cffc184a7bab644ae6e508c9f6.png
[https_element.eleme.cn_zh-CN_theme]: https://element.eleme.cn/#/zh-CN/theme
[20210706153949480.png]: /images/20221005/bb418913fad3444abc135664df896263.png
[20210706154208206.png]: /images/20221005/95e2808c50de449695d530902aa776fb.png
[20210706154441416.png]: /images/20221005/b1876c939d204877b79787ada2f06db1.png
[20210706154639830.png]: /images/20221005/26bed2dfe45946d8afd7aece79619cd9.png
[20210706154752748.png]: /images/20221005/ac6a7fe33417495284fa99d04af5210c.png
[2021070615495423.png]: /images/20221005/59a6e65d0ee84962a06f20b7d7877287.png
[20210706155007722.png]: /images/20221005/abc8e0c3a7d0444aa8a55b64a935632c.png
[20210706155306732.png]: /images/20221005/96724a344cf54b23b88fee5fc8c0913f.png
[20210706155721933.png]: /images/20221005/27b6177deb6b4946a8af81138101bc7b.png
[20210706155605207.png]: /images/20221005/0d94556aa6704aaba1af3591b38ff116.png