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

本文介绍如何在 Element UI 中实现局部自定义主题,通过在线工具生成并下载自定义样式文件,仅应用于指定页面而不影响全局样式。针对特殊情况提供了解决方案。

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

背景

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

下载自定义主题

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

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

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

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主题了。

自定义Element-ui组件的样式,你可以使用以下方法: 1. 通过修改全局的CSS样式来自定义Element-ui组件的样式。你可以在项目的CSS文件中添加对应组件的类名,然后重写相应的样式规则来实现自定义样式效果。例如,如果你要自定义Table组件的表头样式,你可以给表头所在的元素添加一个类名,并在CSS文件中为这个类名定义新的样式规则。 2. 使用Element-ui提供的自定义主题功能来修改组件的样式。你可以通过在项目中创建一个新的主题文件,并在该文件中修改对应组件的样式变量来实现自定义样式效果。具体的步骤和方法可以参考Element-ui官方文档中关于自定义主题的部分。 3. 使用Element-ui提供的CSS作用域或样式作用域来限定组件样式的作用范围。Element-ui的组件在渲染时会自动添加一个唯一的class作为样式作用域,你可以通过在对应组件的父级元素上添加一个类名,并在CSS文件中使用该类名限制样式作用范围。 希望以上方法能帮助到你自定义Element-ui组件的样式。<span class="em">1</span><span class="em">2</span> #### 引用[.reference_title] - *1* [Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用](https://download.youkuaiyun.com/download/weixin_38729022/12944226)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* [Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作](https://download.youkuaiyun.com/download/weixin_38542223/13125838)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值