【UniApp】-uni-app-修改组件主题和样式
<p><img src="https://img2023.cnblogs.com/blog/2105804/202312/2105804-20231203180655767-425678559.png" alt="" loading="lazy"></p><h1 id="前言">前言</h1>
<ul>
<li>好，经过上个章节的介绍完毕之后，了解了一下 uni-app-扩展组件</li>
<li>那么了解完了uni-app-扩展组件之后，这篇文章来给大家介绍一下 uni-app-修改组件主题和样式</li>
<li>首先不管三七二十一，先来新建一个项目</li>
</ul>
<h1 id="搭建演示环境">搭建演示环境</h1>
<p>创建一个全新的项目，因为本文要修改组件主题和样式，所以这次创建项目选择 <code>uni-ui</code> 模板：</p>
<p><img src="https://img2023.cnblogs.com/blog/2105804/202312/2105804-20231209235351562-575532042.png" alt="" loading="lazy"></p>
<p>然后在配置一下，微信小程序的 AppId，直接去之前的项目中拷贝一下即可，找到之前项目的 <code>manifest.json</code> 文件，然后选择微信小程序配置，复制一下即可。</p>
<ul>
<li>经过如上的这么一顿操作之后，就可以搭建完毕运行环境，与编码环境</li>
<li>接下来就可以开始进行介绍 uni-app-修改组件主题和样式内容了</li>
</ul>
<h1 id="步入正题">步入正题</h1>
<h2 id="修改组件主题">修改组件主题</h2>
<ul>
<li>首先我们来看一下，uni-app-修改组件主题的官方文档：https://uniapp.dcloud.net.cn/component/uniui/uni-sass.html</li>
</ul>
<p>我们先使用一下组件，然后在看完了样式之后我们在进行修改，这里我们使用数字角标组件，先来看一下效果：</p>
<pre><code class="language-vue"><template>
<view>
<uni-badge text="2" type="primary"></uni-badge>
<uni-badge text="4" type="error"></uni-badge>
<uni-badge text="22" type="primary"></uni-badge>
</view>
</template>
<script>
export default {
}
</script>
<style>
</style>
</code></pre>
<p>运行一下，效果如下：</p>
<p><img src="https://img2023.cnblogs.com/blog/2105804/202312/2105804-20231210005414262-1482598860.png" alt="" loading="lazy"></p>
<p>我通过发现这个数字角标组件的样式是根据 <code>type</code> 属性来决定的，那么我们就可以通过修改 <code>type</code> 属性来修改组件的主题，比如说我们把 <code>type</code> 属性的值改为 <code>success</code>，那么组件的主题就会变成绿色。</p>
<p>那么知道了这些内容之后，我们就好办了，假如说我们要更改一下 <code>type=primary</code> 的颜色，那么我们就需要修改 primary 所对应的颜色。</p>
<p>我在前面的文章当中是不是有介绍到一个文件叫做 uni.scss，这个文件就是用来修改组件主题的，使用或修改对应的 scss 变量，就可以修改组件的主题。</p>
<p><img src="https://img2023.cnblogs.com/blog/2105804/202312/2105804-20231210010059542-761897787.png" alt="" loading="lazy"></p>
<p>上图中，是我查阅官方文档发现，提供了一些变量默认值，这些值就是当前组件的主题，我们可以通过修改这些值来修改组件的主题。</p>
<p>我们要更改的是 <code>primary</code> 的颜色，那么我们就可以在 <code>uni.scss</code> 文件中，找到 <code>primary</code> 这个变量，然后修改它的值即可。</p>
<blockquote>
<p>注意：通过 uni-ui 创建的项目, uni.scss 文件是没有内容的，需要自己手动添加</p>
</blockquote>
<p>假如说我将 <code>primary</code> 的颜色修改为 <code>red</code>，那么组件的主题就会变成红色。</p>
<pre><code class="language-scss">$uni-primary: red;
</code></pre>
<p><img src="https://img2023.cnblogs.com/blog/2105804/202312/2105804-20231210010504522-1176735177.png" alt="" loading="lazy"></p>
<p>修改组件主题的方式就是这样，首先你要确定你要修改组件对应的 scss 变量，在通过修改 <code>uni.scss</code> 文件中的变量值，就可以修改组件的主题。</p>
<p>最主要是就是查阅官方文档，大家都需要有这种查阅官方文档的习惯，这样才能更好的学习。</p>
<h2 id="修改组件样式">修改组件样式</h2>
<p>就继续以上面的数字角标组件为例，我们来修改一下组件的样式，比如说我们想要修改一下组件的圆角，那么我们就可以通过修改组件的 <code>border-radius</code> 属性来修改组件的圆角, 还想修改一下文字的颜色，那么我们就可以通过修改组件的 <code>color</code> 属性来修改文字的颜色。</p>
<p>那么我们第一步要做的就是，找到要修改样式的组件所对应的元素类名, 这个时候我就打开控制台的审查元素。</p>
<p><img src="https://img2023.cnblogs.com/blog/2105804/202312/2105804-20231210011906547-1866568311.png" alt="" loading="lazy"></p>
<p>然后我就可以看到，数字角标组件所对应的元素类名是 <code>uni-badge</code>，那么我们就可以通过修改 <code>uni-badge</code> 这个类名来修改组件的样式。</p>
<p><img src="https://img2023.cnblogs.com/blog/2105804/202312/2105804-20231210012012937-914840059.png" alt="" loading="lazy"></p>
<p>我这里可以很明确的告诉大家这样修改是不行的，要想修改组件样式有两种方案，分别是：</p>
<ol>
<li>利用 Vue 的深度修改 <code>:deep</code></li>
<li>利用全局属性 <code>:global</code> 修改</li>
</ol>
<p>好，那么知道了方案我们就可以开始修改了，首先我们来看一下第一种方案，利用 Vue 的深度修改 <code>:deep</code>。</p>
<pre><code class="language-scss"><style>
:deep(.uni-badge) {
color: #000;
border-radius: 5px;
}
</style>
</code></pre>
<ul>
<li>运行在 H5 端的效果如下：</li>
</ul>
<p><img src="https://img2023.cnblogs.com/blog/2105804/202312/2105804-20231210012513289-713706110.png" alt="" loading="lazy"></p>
<p>可以看到是一点问题都没有的，那么我们再来看一下运行在微信小程序端的效果：</p>
<p><img src="https://img2023.cnblogs.com/blog/2105804/202312/2105804-20231210012553068-715968108.png" alt="" loading="lazy"></p>
<p>可以看到是没有起效果的，那么这是为什么呢？因为我们没有加 <code>!important</code>，我们要将优先级提高, 加上 <code>!important</code> 之后，再来看一下效果：</p>
<p><img src="https://img2023.cnblogs.com/blog/2105804/202312/2105804-20231210012807241-56938659.png" alt="" loading="lazy"></p>
<blockquote>
<p>注意：最好在修改的属性后面加上 <code>!important</code>，否则有的平台可能无效，上面已经验证过了</p>
</blockquote>
<p>第二种方案，利用全局属性 <code>:global</code> 修改，这个方案就比较简单了，直接上代码：</p>
<pre><code class="language-scss"><style>
:global(.uni-badge) {
color: #000 !important;
border-radius: 5px !important;
}
</style>
</code></pre>
<p>这里我就不贴效果图了，大家可以自己去运行一下，效果是一样的。</p>
<h1 id="总结">总结</h1>
<ul>
<li>本篇文章主要给大家介绍了 uni-app-修改组件主题和样式的内容</li>
<li>通过本篇文章的学习，相信大家对 uni-app-修改组件主题和样式有了一定的了解</li>
<li>本篇文章的内容就介绍到这里，感谢大家的阅读，如果有什么不足的地方，欢迎大家指出，我会及时修改的，谢谢大家的支持</li>
</ul>
<h1 id="最后">最后</h1>
<p>大家好我是 BNTang, 一个热爱分享的技术的开发者，如果大家觉得我的文章对你有帮助的话，可以关注我的公众号 <code>JavaBoyL</code>，我会在公众号中分享一些IT技术和一些个人的见解，谢谢大家的支持。</p>
<p><img src="https://img2023.cnblogs.com/blog/2105804/202311/2105804-20231129232539490-1458223711.png" alt="" loading="lazy"></p><br><br>
来源：https://www.cnblogs.com/BNTang/p/17892134.html
頁:
[1]