修改Element-ui组件的样式无效？

缺乏、安全感 2023-06-24 04:47 210阅读 0赞

框架vue2.0，使用element中自有些组件样式不合心意，但是在style中改不过来？  
**1**，想将某个组件样式全局统一，通过控制台f12查看组件类名，在App.vue的style里面，写入要修改的样式，style不可加‘scoped’属性，这样的话，你在App.vue写入的样式会引用在每个页面

<style lang="less">
    	// 分页器组件
    	.el-pagination{ 
    	    padding: 8px 5px;
    	    background: rgba(0,0,0,.2);
    	}
    </style>

**2**，只想在某个页面修改组件样式，同样查看组件类名，假如类名是：**.hover-row**，他的父级容器是你自己写入的dom，类名是：**.box**，然后在style标签下写(前提是你的css预处理是less)：

<style lang="less" scoped>
    	// .hover-row组件类名， 有时候组件样式是行间，所以加important
    	.box /deep/  .hover-row{ 
    		color:#ddd !important;
    	}
    </style>

如果还是改不了，就在这个页面本身的style标签外面再写一对style标签，不要加scoped属性，但是修改的时候，还是要加他的父级类名，否则只要打开这个页面，之后，这个样式便还是应用到全局:

<style lang="less" scoped>
    	
    </style>
    <style lang="less">
    	// .hover-row组件类名， 前面加上父级类名，防止应用全局
    	.box /deep/  .hover-row{ 
    		color:#ddd !important;
    	}
    </style>

做人，最重要的是开心嘛，der  
![在这里插入图片描述][20191213171014492.png_pic_center]

[20191213171014492.png_pic_center]: https://img-blog.csdnimg.cn/20191213171014492.png#pic_center

发表评论取消回复

表情：

评论列表（有 0 条评论，210人围观）

还没有评论，来说两句吧...

相关阅读

相关修改Element-ui组件的样式无效？

框架vue2.0，使用element中自有些组件样式不合心意，但是在style中改不过来？ 1，想将某个组件样式全局统一，通过控制台f12查看组件类名，在App.vue的s

缺乏、安全感/ 2023年06月24日 04:47/ 0 赞/ 210 阅读

相关 elementui Tabs组件修改样式自定义样式去掉底部横线等

默认： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmN

冷不防/ 2023年01月17日 02:26/ 0 赞/ 878 阅读

相关在vue-cli中关于修改elementUI样式无效的解决方法（最新）

平时在使用element开发时，难免需要修改其样式，有时修改不起作用，在vue-loader文档中中给出了解决方法：深度作用选择器（其实就是样式穿透） >>>

矫情吗；*/ 2022年12月11日 13:52/ 0 赞/ 383 阅读

相关 elementUI中的el-scrollbar 组件

<div style="background:FAFBFF;width:90%; float:right;border-radius:10px;height:9

旧城等待，/ 2022年10月19日 14:57/ 0 赞/ 169 阅读

相关 elementui修改单元格的样式

废话不多说直接上代码在el-table中定义样式函数，js中写函数 <el-table :cell-style=

港控/mmm°/ 2022年05月17日 11:38/ 0 赞/ 326 阅读

相关 vue组件样式

背景使用嵌套组件时，样式往往会覆盖，即子组件的样式会覆盖App.vue的样式比如App.vue的h1标签的颜色是红色，User.vue的h1是绿色，但运行时，都变成

约定不等于承诺〃/ 2021年12月12日 00:19/ 0 赞/ 364 阅读

相关修改elementUI组件样式无效的多种解决方式

前言：vue+elementUI项目开发中，经常遇到修改elementUI组件样式无效的问题，原因：在vue组件中我们经常需要给style添加scoped来使得当前样式只作

╰半橙微兮°/ 2021年09月29日 12:06/ 0 赞/ 1211 阅读

相关 ElementUI 修改默认样式的几种办法

ElementUI 是一套ui组件库，目前最新版本 react 和 vue 等主流框架都有支持。该库默认主题色是天蓝色，若用于项目开发，难免遇到要需求修改其默认样式的情况，本文

客官°小女子只卖身不卖艺/ 2021年09月17日 08:16/ 0 赞/ 503 阅读

相关 element-ui,iview组件样式修改，框架自带样式修改,/deep/击穿

项目中经常要修改框架自带的样式，但是写style，却没有效果方法一：给组件加id / class，在style一面直接修改，注意style不要加scoped,vue可以有多

太过爱你忘了你带给我的痛/ 2021年09月17日 08:02/ 0 赞/ 906 阅读

相关 uni-app 修改 radio/checkbox/switch 组件样式

我们在用 uni-app 开发前端页面时，往往需要修改一些组件的默认样式，特别是颜色。那么如何修改 radio/checkbox/switch（单选框/复选框/开关）的样...

朱雀/ 2021年03月29日 10:48/ 0 赞/ 3479 阅读