uni-app - 内置组件样式修改无效问题
<h1 id="uni-app---内置组件样式修改无效问题">uni-app - 内置组件样式修改无效问题</h1><h2 id="全局样式中修改">全局样式中修改</h2>
<p>在app.vue中</p>
<pre><code class="language-css"> //设置圆角
checkbox.round .wx-checkbox-input,
checkbox.round .uni-checkbox-input {
border-radius: 100upx;
}
//设置背景色
checkbox.red .wx-checkbox-input,
checkbox.red.checked .uni-checkbox-input{
background-color: #ffffff !important; //背景
border-color: #ffffff !important; //边框
color: #2681FB !important; //对勾
}
</code></pre>
<h2 id="样式穿透">样式穿透</h2>
<p>项目里的style标签全部用scoped属性进行了修饰。</p>
<p><img src="https://img2022.cnblogs.com/blog/2237537/202205/2237537-20220531114403803-1473936640.png" alt="" loading="lazy"></p>
<p>所以想在父组件中修改子组件的样式，直接通过子组件的类名是无效的，要实现样式穿透，需要使用深度作用选择器</p>
<pre><code class="language-css">原生css 使用>>>
less 使用/deep/
sass 使用:v-deep
</code></pre>
</div>
<div id="MySignature" role="contentinfo">
Lee2<br><br>
来源：https://www.cnblogs.com/zc-lee/p/16329929.html
頁:
[1]