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

缺乏、安全感 2023-06-24 04:47 231阅读 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 条评论，231人围观）

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

相关阅读

相关 ElementUI的DateTimePicker组件修改时间格式

场景 ElementUI的dateTimePicker组件是一个日期和时间共存的选择器。有时我们需要规定选择时的时间格式，这时就要用这个组件的format属性。

红太狼/ 2023年10月18日 11:32/ 0 赞/ 51 阅读

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

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

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

相关 elementui默认样式修改的问题

修改elementui默认的css颜色。我用的第一种方法参考： [https://www.cnblogs.com/my466879168/p/12091439.html]

水深无声/ 2023年03月03日 06:31/ 0 赞/ 47 阅读

相关 ElementUI 中Select和Input组件修改宽、高

如何改变select、input的宽、高 1、直接修改如下（只能修改其宽度）： <el-input style="width: 200px; " p

你的名字/ 2023年02月20日 02:58/ 0 赞/ 51 阅读

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

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

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

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

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

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

相关 ElementUI table 样式修改

一、概述 element-ui table 默认是白色背景，现在需要修改为黑色背景，白色文字。二、代码实现 css样式 <style> /

我不是女神ヾ/ 2022年11月01日 00:46/ 0 赞/ 60 阅读

相关 elementui修改单元格的样式

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

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

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

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

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

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

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

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