ElementUI修改默认样式，又不影响到其他组件

最新推荐文章于 2024-04-11 17:05:08 发布

原创最新推荐文章于 2024-04-11 17:05:08 发布 · 3.9k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue #html #css #element

vue 专栏收录该内容

11 篇文章

订阅专栏

本文介绍如何在Vue项目中全局修改Element-UI表格的颜色，包括表头和单元格文字颜色，通过使用全局样式而非scoped属性，实现对Element-UI默认样式的覆盖，并探讨解决CSS全局污染的方法。

（1），修改全局的话，特别简单；直接在vue 中

<style >

    .el-table th .cell{
 		 color:rgba(0,0,0,0.5)!important;
		}
		.el-table td .cell{
 		  color:rgba(0,0,0,1.8)!important;
		}
</style>

#注意，一定不要写 scoped;因为是这私有的。这样就覆盖不了element-ui的样式了，层级不够高；
但是这么写也有一个弊端。会覆盖所有的页面同类名的，css全局的污染；不过还是有解决方法的；

		<div id="colorBox">
			<ul>
				<li>123</li>
				<li>321</li>
				<li>456</li>
				<li>654</li>
			</ul>
	</div>

<style >
/* 因为id是唯一的。所以就简单了解决了这个'污染'*/
#colorBox{
    .el-table th .cell{
 		 color:rgba(0,0,0,0.5)!important;
		}
		.el-table td .cell{
 		  color:rgba(0,0,0,1.8)!important;
		}

}

</style>