element-ui如何避免环境污染

最新推荐文章于 2023-06-30 10:39:16 发布
最新推荐文章于 2023-06-30 10:39:16 发布
阅读量390 收藏
点赞数
分类专栏： vue随笔 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43259264/article/details/82892400
版权

最近在写项目的时候，会出现这个问题。因为我是后期加入项目的，样式也不太熟悉。一不小心就会把样式改的乱七八糟。所以把解决方法记录一下。

1.首先要把style标签里一般会带的scoped去掉

在这里插入图片描述
直接简单粗暴

2.在所有元素的最外层套一个 并设置class

举个栗子：
在这里插入图片描述

3.F12可以看见对应元素的class名
在这里插入图片描述

4.更改样式的时候加上父元素的样式名就可以啦

月亮和六便士i
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
element-ui.rar element-ui核心库压缩包
12-20
element-ui.rar element-ui核心库压缩包
Element UI 和 Element Plus样式污染
weixin_49174517的博客
03-12 219
文档 vite.config 省略了一段代码，导致更改后不生效，通过查看源码发现，需要配置按需导入的插件，样式才会生效 https://github.com/element-plus/element-plus-vite-starter。elementplus自定义命名。
Vue+element-ui样式全局污染
qq_39691676的博客
11-13 1310
给需要修改样式的html添加单独的class属性 <style> .commonstyle .el-radio-button__inner { border-left: 1px solid #dcdfe6; }
软件测试面试题：如何准备测试数据？如何防止数据污染？
一亿并发的博客
05-07 241
如何准备测试数据？如何防止数据污染？ 生产数据备份、数据隔离、测试数据落入影子库、挡板、mock 个人简介 我是一名测试兼开发工程师，目前25K，目前做的是无人驾驶，欢迎和大家一起交流测试技术，一起高薪就业，我们还有一起打妖怪的群哦，还有面试题小程序哦 ...
一个关于vue+element-ui打包样式污染的问题
weixin_48722827的博客
06-30 209
在本地运行的项目没有问题当打包发布时就会又样式问题，经过排查后发现原因时未在页面的styel标签加入scoped导致的样式污染，全部加上scoped后还是又一个样式被污染，但是找了很久没有找到污染源经过一系列的尝试找到了一个方法
css样式防止全局污染正确做法！
m0_72642533的博客
02-03 1943
css样式防止全局污染
解决element-ui修改原生的样式污染全局的样式
zebghfv的博客
10-27 2067
方法一：把样式css写在没有scoped属性的style标签中，部分组件的样式需要用到!important使其样式权重最高 缺点：会影响全局的样式。 优点：某些共同的样式不需要进行重复书写。 现在页面有2个组件，可以进行点击切换，且2个组件有同样的element-ui组件。现在想对Home的输入框设置蓝色，about组件的设置为红色。 如图home组件的样式书写： about组件的样式书写： 最后的结果是2个组件的样式都是蓝色。显然不是想要的结果。 解决办法：利用方法二 方法二：样式穿透 >&gt
element UI 、iview等插件修改样式不污染全局环境
大脸猫~
08-09 5445
第三方UI插件可以帮我们大大提高开发效率，尤其是组件绑定了很多事件，方便我们使用。但是样式可能会不适合，所以就需要做出修改 修改第三方插件首先要去掉scoped,否则修改样式不生效，但是会出现一个问题，去掉scoped就代表该样式是全局的，修改的插件样式会影响全局，怎么办呢，我们在插件样式的外面定义一个父盒子包裹一下就可以啦，既能修改样式，又不会污染全局环境。 例如： .loginf...
这样修改element UI组件的样式，又不会污染全局
一捆铁树枝的博客
12-13 2019
想要修改element组件的样式，试过一下的三种方法： 1、在style外面另写个style； 2、在组件上加个id或者class定位，然后用 .yourClass /deep/ .element组件样式 修改，会全局污染； 3、将要修改的样式在外面写个单独样式文件，在需要用到的页面引入。 以上三种方法均会引起全局样式污染的问题，正确方法如下： 采用定位组件...
element UI -- 默认样式修改不成功的问题
热门推荐
bobobocai的博客
08-20 3万+
有的时候element提供的默认的样式不能满足项目的需要，就需要我们队标签的样式进行修改，但是发现修改的样式不起作用 原因：scoped 解决方法：去掉scoped 注意：此时该样式会污染全局样式，可以把它放在公共的css里面 为了不让所有的 el-input标签都是该样式，可以在HTML给改input加上一个类名，比如 modInput ...
element-ui 2.15.14版本
10-09
免费下载、免费下载、免费下载，下载后挂载nginx、tomcat、apache服务器下运行，也可以使用vs code打开使用live server访问
svelte-element-ui
02-16
什么是svelte-element-ui？ svelte-element-ui是基于Svelte的element-ui组件库。 安装 从npm安装。 npm install svelte-element-ui 在svelte文件中导入css。 < script lang =" ts " > import 'svelte-...
HTML+Element-ui邮件管理前端界面
07-12
若element-ui显示故障： 1.查看是否引用 <!--引入 element-ui 的样式，--> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <!-- 必须先引入vue， 后使用element-ui -->...
element-ui资源包
08-03
前端使用非常多的element-ui，直接将文件夹拷入到项目中即可
vue 加载数据 影响seu_解决Vue 使用Element-ui table数据覆盖污染问题
weixin_34603528的博客
12-29 545
今天处理了一个需求, 利用Element-UI提供的表格组件的展开做数据展示, 遇到了展开后的表格数据污染问题, 后展开的表格的内部数据覆盖了所有其他展开的表格数据, 针对该问题的解决方案,在此做了个DEMO记录.场景我们需要做个班级展示, 其中主表格(班级信息表)主要展示班级信息, 点击展开后的表格(班级学生表)主要展示班级的学生数据, 根据官方DEMO进行代码编写, 但是很快就发现了问题, 问...
vue修改Element UI样式，样式穿透
濮家大少
08-10 1万+
在vue组件中，为了使样式私有化（模块化），不对全局造成污染，在style标签上添加scoped属性，以表示它只属于当下的模块。这样在打包的时候会生成一个独一无二hash值，这样父组件的样式就不会影响到子组件了。 但是如果你要想修改子组件的样式，就只能修改公共的样式，这样的话其他使用这个组建的地方都会改变，需要在组件中局部修改第三方组件的样式，而又不想去除scoped属性造成组件之间的样式污染。此时只能通过>>>，穿透scoped。 有些Sass 之类的预处理器无法正确解析 >&gt
在element组件中自定义组件的样式不生效问题（vue scoped scss无效问题）
二三的博客
09-14 5736
当我们在项目中需要给element组件加上一些自定义样式的时候，往往是不生效的。这是因为Vue项目中使用第三方框架的时候，Vue中有scoped，声明了样式是在组件范围内生效的，避免了不同组件的样式污染。 解决方法 1. 去掉scoped 这种方法确实可以实现效果，简单粗暴，却会造成不同组件样式污染，不建议。 2. 使用 /deep/ 深度修改标签样式 找到需要修改的 element标签的类名，然后在类名钱加上 /deep/ ，可以强制修改默认样式。这种方式可以直接用到有 scoped 属性的 sty.
element ui body添加类名 下拉框修改样式避免全局污染
伍六七
10-14 2068
element中要想修改下拉框样式必须去掉scoped，并且下拉框他不属于当前组件的域，所以说如果一个项目有两个甚至更多的地方要用到这个组件，那么难免会出现样式冲突。（一个页面要只有一处用到可忽略） 解决冲突的方法，在vue中给个别组件中的body添加类名 具体思路是 -监听当前下拉框，给body添加一个类，下拉框消失再移除这个class，代码如下 1.通过 visible-chang...
关于vue使用element-ui/weui中修改官方的样式
一个没人看的博客
12-15 7203
关于vue使用element-ui/weui中修改官方的样式 ​​在这个文章前我们要明白常用的框架以下： Element-UI：Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架，手机端有对应框架是 Mint UI 。 饿了么还是有点东西的饿了么还是有点东西的 WeUI：一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量...
element -ui
最新发布
03-20
Element-UI是一个基于Vue.js的组件库，用于构建Web界面的用户界面库。它提供了丰富的可重用组件，包括按钮、表单、弹窗、导航等等，可以帮助开发者快速构建现代化的Web应用程序。 要使用Element-UI，你需要引入Element-UI的样式和脚本文件。你可以通过以下方式引入Element-UI： 1. 使用CDN引入Element-UI的样式和脚本文件[^1]： ```html <!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <!-- 引入组件库 --> <script src="https://unpkg.com/element-ui/lib/index.js"></script> ``` 2. 使用npm安装Element-UI，并在项目中引入样式和组件[^2]： ```shell npm i element-ui -S ``` ```html <!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <!-- 引入组件库 --> <script src="https://unpkg.com/element-ui/lib/index.js"></script> ``` 通过以上方式引入Element-UI后，你就可以在Vue.js的项目中使用Element-UI的组件了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值