elementUI组件修改样式覆盖无效

发布时间:2021-10-21沉默小管-技术博客 elementUI组件修改样式覆盖无效 526 1
原文地址: https://blog.csdn.net/zqian1994/article/details/83899919
<p>
	<span style="color: rgb(77, 77, 77); line-height: 1;" font-size:16px;background-color:#ffffff;"="">为了vue页面样式模块化，不对全局样式造成污染，我们往往都会加入scoped属性用来限制样式的作用域，然而这也会导致当我们修改部分ui组件样式失效。为了避免这种情况，我们常用以下方式来解决。</span> 
</p>
<p>
	<span style="color: rgb(77, 77, 77); line-height: 1;" font-size:16px;background-color:#ffffff;"=""><span style="font-weight: 700; color: rgb(77, 77, 77); line-height: 1;" font-size:16px;background-color:#ffffff;"="">一、深度作用选择器（ &gt;&gt;&gt; ）</span></span> 
</p>
<p>
	<span style="line-height: 1;" font-size:14px;color:#4d4d4d;"="">&lt;</span><span class="hljs-selector-tag" style="line-height: 1;" font-size:14px;color:#a71d5d;"="">style</span><span style="font-family:" font-size:14px;color:#4d4d4d;"=""> </span><span class="hljs-selector-tag" style="line-height: 1;" font-size:14px;color:#a71d5d;"="">scoped</span><span style="line-height: 1;" font-size:14px;color:#4d4d4d;"="">&gt;</span> 
</p>
<p>
	<span class="hljs-selector-class" style="line-height: 1;" font-size:14px;color:#795da3;"="">.box</span><span style="line-height: 1;" font-size:14px;color:#4d4d4d;"=""> &gt;&gt;&gt; </span><span class="hljs-selector-class" style="line-height: 1;" font-size:14px;color:#795da3;"="">.content</span><span style="line-height: 1;" font-size:14px;color:#4d4d4d;"=""> {</span> 
</p>
<p>
	<span class="hljs-attribute" style="line-height: 1;" font-size:14px;color:#0086b3;"="">&nbsp;&nbsp;&nbsp;&nbsp;font-size</span><span style="line-height: 1;" font-size:14px;color:#4d4d4d;"="">:</span><span class="hljs-number" style="line-height: 1;" font-size:14px;color:#4d4d4d;"="">20px</span><span style="line-height: 1;" font-size:14px;color:#4d4d4d;"="">;</span> 
</p>
<p>
	<span style="line-height: 1;" font-size:14px;color:#4d4d4d;"="">}</span> 
</p>
<p>
	<span style="font-family:" font-size:14px;color:#4d4d4d;"=""><!--<span class="hljs-selector-tag" style="line-height: 1;" font-size:14px;color:#a71d5d;"="">style</span><span style="line-height: 1;" font-size:14px;color:#4d4d4d;"="">&gt;</span><span style="color:#4D4D4D;font-family:" font-size:16px;background-color:#ffffff;"=""></span><span style="color:#4D4D4D;font-family:" font-size:16px;background-color:#ffffff;"=""></span> </span>
</p>
<p>
	<span style="color:#4D4D4D;font-family:" font-size:16px;background-color:#ffffff;"=""><span style="font-weight: 700; color: rgb(77, 77, 77); line-height: 1;" font-size:16px;background-color:#ffffff;"="">&nbsp;二、/deep/ 预处理器less下使用</span><br />
</span> 
</p>
<p>
	<span style="color:#4D4D4D;font-family:" font-size:16px;background-color:#ffffff;"=""></span> 
</p>
<p style="font-family:" font-size:16px;color:#4d4d4d;background-color:#ffffff;"=""><span style="line-height:1;"> 深度选择器/deep/与&gt;&gt;&gt;作用相同</span>
	</p>
<p style="font-family:" font-size:16px;color:#4d4d4d;background-color:#ffffff;"=""><span style="line-height:1;"> 通过 &gt;&gt;&gt; 可以使得在使用scoped属性的情况下，穿透scoped，修改其他组件的值</span>
</p>
<p>
	<span style="color:#4D4D4D;font-family:" font-size:16px;background-color:#ffffff;"=""></span><span style="line-height: 1;" font-size:14px;color:#4d4d4d;"="">&lt;</span><span class="hljs-selector-tag" style="line-height: 1;" font-size:14px;color:#a71d5d;"="">style</span><span style="font-family:" font-size:14px;color:#4d4d4d;"=""> </span><span class="hljs-selector-tag" style="line-height: 1;" font-size:14px;color:#a71d5d;"="">scoped</span><span style="font-family:" font-size:14px;color:#4d4d4d;"=""> </span><span class="hljs-selector-tag" style="line-height: 1;" font-size:14px;color:#a71d5d;"="">lang</span><span style="line-height: 1;" font-size:14px;color:#4d4d4d;"="">="</span><span class="hljs-selector-tag" style="line-height: 1;" font-size:14px;color:#a71d5d;"="">less</span><span style="line-height: 1;" font-size:14px;color:#4d4d4d;"="">"&gt;</span> 
</p>
<p>
	<span style="color:#4D4D4D;font-family:" font-size:16px;background-color:#ffffff;"=""></span><span class="hljs-selector-class" style="line-height: 1;" font-size:14px;color:#795da3;"="">.select</span><span style="line-height: 1;" font-size:14px;color:#4d4d4d;"=""> {</span> 
</p>
<p>
	<span style="color:#4D4D4D;font-family:" font-size:16px;background-color:#ffffff;"=""></span><span style="line-height: 1;" font-size:14px;color:#4d4d4d;"="">/deep/ .ivu-card-body {</span> 
</p>
<p>
	<span style="color:#4D4D4D;font-family:" font-size:16px;background-color:#ffffff;"=""></span><span class="hljs-attribute" style="line-height: 1;" font-size:14px;color:#0086b3;"="">width</span><span style="line-height: 1;" font-size:14px;color:#4d4d4d;"="">: </span><span class="hljs-number" style="line-height: 1;" font-size:14px;color:#4d4d4d;"="">100%</span><span style="line-height: 1;" font-size:14px;color:#4d4d4d;"="">;</span> 
</p>
<p>
	<span style="color:#4D4D4D;font-family:" font-size:16px;background-color:#ffffff;"=""></span><span style="line-height: 1;" font-size:14px;color:#4d4d4d;"="">}</span> 
</p>
<p>
	<span style="line-height: 1;" font-size:14px;color:#4d4d4d;"="">}</span> 
</p>
<p>
	<span style="font-family:" font-size:14px;color:#4d4d4d;"=""></span><span style="font-family:" font-size:14px;color:#4d4d4d;"=""><!--<span class="hljs-selector-tag" style="line-height: 1;" font-size:14px;color:#a71d5d;"="">style</span><span style="line-height: 1;" font-size:14px;color:#4d4d4d;"="">&gt;</span> </span>
</p>
<p>
	<span style="color:#4D4D4D;font-family:" font-size:16px;background-color:#ffffff;"=""></span> 
</p>
<p>
	<br />
</p>