关于elementui自带样式修改的问题

最新推荐文章于 2024-03-18 00:54:08 发布
最新推荐文章于 2024-03-18 00:54:08 发布
阅读量305 收藏
点赞数
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/VeraHsiang/article/details/108328790
版权

因业务需求，对当前页面的elementui自带的样式进行一些修改，使用了如下的方式
（1）给style增加scoped，如下图
在这里插入图片描述
在这里面可以修改当前页面的css。
如要修改的是elementui自带样式，需要使用如下格式（深度穿透）：
在这里插入图片描述
（2）如果在style中修改了还是不生效，请使用如下方式
在这里插入图片描述
在这里插入图片描述

爱enjoy
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
修改 element-ui 默认样式的两种方法
Sun_blog
12-24 3732
修改 element-ui 默认样式的方法有好几种，今天我来分享一下我最常用的方法； 首先，我们按F12找到我们要修改样式 DOM 对应的 class ; 然后，在原有的 style 标签后，新建一对style 标签并去掉 scoped 属性； 并在新建的style 标签中，修改element-ui 默认样式； 就像这样???? <style scoped lang="less"> // 在此处编写组件样式 </style> <style lang="less"> /
覆盖或者更改elementui组件原有样式的几种方式如下
qq_41920758的博客
08-15 3760
以上就是本人总结的几种方式，欢迎补充修改。第2种方式适合对element。第四种方式的局限性比较大，不推荐使用。在需要修改的ElementUI标签的style样式前面加上。3、在当前的vue单页面中添加一个新的style标签。通过内联样式style，直接覆盖默认样式，方式如下。，可以强制修改默认样式。这种方式可以直接用到带有。/* 重写element-ui部分样式 */2、 使用全局统一覆盖的方式。/*自己本地的样式*/4 通过内联样式修改。
如何修改Element-UI的默认样式？
huiaixing的博客
03-30 8854
学习过程中在使用Element-UI组件库时，想要修改其默认样式，学习到了几种方法，在这里分享给大家！ 首先要知道使用该组件库后，可以在检察工具中查看到cla
Vue 修改 Element-UI 组件的原生样式
qq_39249627的博客
06-11 1842
Vue 修改 Element-UI 组件的原生样式
vue中修改element ui组件默认样式的两种方式
大把小米的博客
05-22 1510
vue项目中经常会用到element ui，有时候需要修改默认的样式，比如表格，导航栏等，输入框等等。 可以用以下两种方式修改： 1.给组件加上id或者class，然后添加一个style，不要加scoped（vue可以有多个style），在组件里直接修改 2.外部引入css文件，默认样式会被覆盖 3.利用深度::v-deep深度修改组建的样式，可以直接写在到scoped作用域的style里面。（推荐） ::v-deep .video-play { .vjs-button>.vjs-icon-
修改vue elementUI多选框问题 elementui lib
01-22
问题：elementUI多选框，一维数组，如官网例子那样数组内元素为字符串时正常使用，但在实际情况多选框的元素为对象，为对象时，默认选中不显示，实际上是选中了，但是不显示 ...
解决vue+elementui项目打包后样式变化问题
10-15
在使用Vue.js和ElementUI构建项目时，开发者经常会遇到一个问题：在开发环境下一切正常，但一旦执行项目打包，样式就会发生改变，导致页面显示效果与预期不符。这主要是由于CSS加载顺序、模块化打包工具（如Webpack...
修改elementUI的样式
11-02
修改ElementUI组件样式的几种方法
Vue elementui字体图标显示问题解决方案
10-14
主要介绍了Vue elementui字体图标显示问题解决方案,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
elementUI:修改elementUI源码-修改
03-24
特别感谢以下机构的慷慨赞助： 适用于Web的Vue.js 2.0 UI工具包。 链接 主页和文档 入门套件 吉特 安装 npm install element-ui -S 快速开始 import Vue from 'vue' import Element from 'element-ui' ...
ElementUI静态主题样式包，实现elementui动态换肤
01-09
ElementUI静态主题样式包,包含light-theme.css和dark-theme.css，还有对应的字符集，下载后放到static目录下，在index.html中引用即可，可在项目中动态修改此路径，实现换肤
修改element-ui默认css样式的解决方法
LIMI_伞梦的博客
12-10 1842
原因是因为我们在使用vue编写css样式时,会在style添加scoped属性 添加了scoped的组件无法修改的样式，去掉scoped就可以了。 那么有没有办法在不改变原来写好的css样式的情况，修改默认的element-ui样式呢？ 解决方法： 1、在原来的css样式下面，新编写一个不带scoped属性style，里面写需要修改的element-ui默认css样式。 ——————可以解决问题—————— 缺点：这样设置的是全局样式，意思就是如果你的项目里面有多个css需要修改，那么这么设置，两个地方
Vue + Element UI 前端篇（六）：更换皮肤主题
y19910825的博客
09-05 6070
首先安装「主题生成工具」，可以全局安装或者安装在当前项目下，推荐安装在项目里，方便别人 clone 项目时能直接安装依赖并启动。把生成的主题按颜色改名放置 src/theme 目录下。在 main.js 中 import ‘所在路径/index.css’。
Vue+ElementUI实现在线动态换肤
小马甲
10-24 1052
实现的原理：版本之后所有的样式都是基于SCSS编写的，所有的颜色都是基于几个基础颜色变量来设置的，所以就不难实现动态换肤了，只要找到那几个颜色变量修改它就可以了。首先我们需要拿到通过拿到element-ui的版本号，根据该版本号去请求相应的样式。拿到样式之后将样色，通过正则匹配和替换，将颜色变量替换成你需要的，之后动态添加style标签来覆盖原有的css样式。
Vue + ElementUI 实现动态更换任意主题色（动态换肤）
aSmallProgrammer的博客
11-25 7571
Vue + ElementUI 实现动态更换任意主题色（动态换肤）
vue + elementUI实现换肤(1)，已拿意向书
最新发布
qq194582923的博客
03-18 451
面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】前端面试题汇总JavaScript前端资料汇总前端面试题汇总JavaScript前端资料汇总。
Vue + Element UI+Scss + Vuex一键换肤 , 一键换字体大小 ,动态替换全局主题颜色
疑问 搜索 动手 解决 记录
12-08 9938
一、前言 其实我这个写法每个UI库都通用 , 不局限于ElementUI , 看明白思路就知道怎么写了 一键换肤 , 动态替换全局主题颜色功能已经实现很久了 , 在项目验收的时候出现了一个小问题 , 想改动一下 , 于是来记录一下 前段时间公司项目里需要实现一键换服 , 换主题颜色 , 网上看了一部分 大多数都是用js获取标签元素添加Attribute , 如document.XXXXXXX ,或者是建theme.css文件什么的 , 不太符合我想要实现的用最少的代码实现换肤的功能 , 如果用了框架 , 还
Vue+ElementUI实现多套主题换肤
小马甲
10-23 1718
本地存放多套主题，两者有不同的命名空间，如写两套主题，一套叫day theme，一套叫主题都在一个的命名空间下，我们动态的在body上。
Element UI 自定义动态换肤（主题）
老程的博客
12-13 7420
无需加载外部资源，动态切换项目主题色（ 使用的 Element UI）
elementui自带图片
09-02
ElementUI自带的图片包括ElementUI自带的图标和ElementUI组件中的默认图片。ElementUI自带的图标可以通过引入ElementUI的图标库进行使用，如font-awesome.css图标库或阿里的iconfont图标库。而ElementUI组件中的默认...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值