欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

elementui 更改样式问题

程序员文章站 2022-01-05 10:51:01
...

(1),修改全局的话,特别简单;直接在vue 中

<style >
<span class="token punctuation">.</span>el<span class="token operator">-</span>table th <span class="token punctuation">.</span>cell<span class="token punctuation">{</span>
	 color<span class="token punctuation">:</span><span class="token function">rgba</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span><span class="token number">0</span><span class="token punctuation">,</span><span class="token number">0</span><span class="token punctuation">,</span><span class="token number">0.5</span><span class="token punctuation">)</span><span class="token operator">!</span>important<span class="token punctuation">;</span>
	<span class="token punctuation">}</span>
	<span class="token punctuation">.</span>el<span class="token operator">-</span>table td <span class="token punctuation">.</span>cell<span class="token punctuation">{</span>
	  color<span class="token punctuation">:</span><span class="token function">rgba</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span><span class="token number">0</span><span class="token punctuation">,</span><span class="token number">0</span><span class="token punctuation">,</span><span class="token number">1.8</span><span class="token punctuation">)</span><span class="token operator">!</span>important<span class="token punctuation">;</span>
	<span class="token punctuation">}</span>

</style>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

#注意,一定不要写 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>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22

1.不是scoped
2.每个页面加一个唯一id标识,

                                </div>
            <link href="https://csdnimg.cn/release/phoenix/mdeditor/markdown_views-e44c3c0e64.css" rel="stylesheet">
                </div>
相关标签: elementui