局部使用element-ui自定义主题实践

背景

内部系统虽然使用了element-ui，但同时又混杂了多种风格的样式和各自写的通用组件，在参与新功能开发时，产品经理的设计需要以绿色为主题色，看到element官网有个自定义主题，这就不需要自己去写符合设计的组件或者手动修改element样式；同时又不想影响之前的默认样式（不知道会不会有黑魔法，手动修改element样式之类），所以就想做成只有某些功能页能够使用自定义主题的样式。

下载自定义主题

我们可以使用官网推荐的在线主题生成工具，点击右上方的切换主题色，选取自定义的主题色，作者在这使用的是#129611，可以看到效果：

#129611

当然你也可以在官网右上角的下拉颜色选取自定义主题色，可以实时看到不同组件切换主题色后的效果；

在在线主题生成工具切换主题色后就可以下载当前主题对应的样式文件了（css文件），下载后我们看到有不同组件的样式和一个index.css以及一个font目录，我们只需要index.css文件（全部组件的样式），并且删除文件中对font目录文件的引用（我们已经有全局的element默认主题色），然后新建另一个index.scss并将原index.css文件改成cumstomize.scss（这里可以随意命名，但要以scss后缀名）

image

index.scss文件：

// 在vue的入口引用该文件
// 只在当前类的作用域
.element-customize {
  @import "customize.scss";
}

这样设置后只有.element-customize下的element组件会使用自定义样式，而不会影响到全局。

注意

有几个组件不能使用到局部的自定义主题

• $confirm

  • 该组件会在body新建一个confirm组件，所以不在当前.element-customize组件下，这里我们可以使用confirm的customClass属性，设置为.element-customize

• popover

  • 这组件也是在body最后插入，通过$ref属性关联，可以使用popper-class属性

总结

局部自定义主题只是暂时存在的，之后会推广到全局使用，做到样式统一风格之后就可以直接替换默认的element主题了。