uniapp样式穿透修改uview的按钮button图标

news2024/11/23 9:22:11

需求:
想给按钮icon和text改字体颜色,结果发现图标颜色并没有改变

.u-button{
	width: 300rpx;
	background-color: aliceblue;
	color: #aaaa7f;
	margin-top: 20rpx;
}

在这里插入图片描述
接下来用样式穿透解决

1、首先,给UI组件包裹一层view

<view class="time_btn">
	<u-button icon="clock" class="timeBtn" @click="show = true">{{ chooseTime }}</u-button>
</view>

2、利用/deep/样式穿透

.time_btn{
	.u-button /deep/ .u-icon__icon{
		color: #aaaa7f !important;
		margin-right: 15rpx !important;
	}
}

完美解决!!!!!!
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1523667.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【Algorithms 4】算法(第4版)学习笔记 19 - 6.0.4 网络流算法

文章目录 前言参考目录学习笔记1&#xff1a;介绍1.1&#xff1a;最小切分问题1.2&#xff1a;最大流问题1.3&#xff1a;小结2&#xff1a;Ford-Fulkerson 算法&#xff08;FF 算法&#xff09;2.1&#xff1a;介绍2.2&#xff1a;问题3&#xff1a;最大流量 - 最小切分定理 m…

QT----基于QT的人脸考勤系统

目录 1 编译opencv库1.1 下载源代码1.2 qt编译opencv1.3 执行Cmake一直卡着data: Download: face_landmark_model.dat 2 编译SeetaFace2代码2.1 遇到报错By not providing "FindOpenCV.cmake" in CMAKE_MODULE_PATH this project has2.2遇到报错Model missing 3 测试…

python爬虫-AES.CBS加密案例(mmz批量爬取)

下载mmz本页数据 批量下载请看主页&#xff01;&#xff01;&#xff01; 代码&#xff1a; import requests from Crypto.Cipher import AES import base64cookies {PHPSESSID: 48nu182kdlsmgfo2g7hl6eufsa,Hm_lvt_6cd598ca665714ffcd8aca3aafc5e0dc: 1710568549,SECKEY_A…

唯一约束

Oracle从入门到总裁:​​​​​​https://blog.csdn.net/weixin_67859959/article/details/135209645 唯一约束 唯一约束的特点是在某一个列上的内容不允许出现重复。 例如&#xff0c;现在要收集用户的信息&#xff0c;假设包含编号&#xff08;mid&#xff09;、姓名&…

SpringBoot(文件上传功能,阿里云OSS存储,几种配置文件用法)【详解】

目录 一、新增员工 二、文件上传-技术点 1. 文件上传功能 1.客户端上传文件三要素 2 服务端接收文件 Controller接收文件示例 修改允许上传的文件大小 2. 本地存储文件 3. 阿里云OSS存储&#xff08;这里只写一种&#xff0c;可以用其它的&#xff09; 1.介绍 2.开通…

第 126 场 LeetCode 双周赛题解

A 求出加密整数的和 模拟 class Solution { public:int sumOfEncryptedInt(vector<int> &nums) {int res 0;for (auto x: nums) {string s to_string(x);char ch *max_element(s.begin(), s.end());for (auto &c: s)c ch;res stoi(s);}return res;} };B 执行…

QT网络编程之实现UDP广播发送和接收

推荐一个不错的人工智能学习网站&#xff0c;通俗易懂&#xff0c;内容全面&#xff0c;作为入门科普和学习提升都不错&#xff0c;分享一下给大家&#xff1a;前言https://www.captainbed.cn/ai 一.UDP通信 1.QT中实现UDP通信主要用到了以下类&#xff1a;QUdpSocket、QHost…

Type-C接口介绍

1、USB介绍 &#xff08;1&#xff09;标准USB A型连接器&#xff08;左&#xff09;及B型连接器&#xff08;右&#xff09; 引脚1 VCC&#xff08;5V&#xff09; 引脚2 Data- 引脚3 Data 引脚4 接地 &#xff08;2&#xff09;Micro USB 引脚定义及OTG (USB-HOST) …

如何使用GIT

如何使用GIT https://www.runoob.com/w3cnote/git-five-minutes-tutorial.html 欢迎使用Markdown编辑器 你好&#xff01; 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章&#xff0c;了解一下Markdown的基本语…

Vue | 使用 ECharts 绘制折线图

目录 一、安装和引入 ECharts 二、使用 ECharts 2.1 新增 div 盒子 2.2 编写画图函数 2.3 完整代码结构 三、各种小问题 3.1 函数调用问题 3.2 数据格式问题 3.3 坐标轴标签问题 3.4 间隔显示标签 参考博客&#xff1a;Vue —— ECharts实现折线图 本文是在上…

【Linux】Shell编程【一】

shell是一个用 C 语言编写的程序&#xff0c;它是用户使用 Linux 的桥梁。Shell 既是一种命令语言&#xff0c;又是一种程序设计语言。 Shell 是指一种应用程序&#xff0c;这个应用程序提供了一个界面&#xff0c;用户通过这个界面访问操作系统内核的服务。 Shell属于内置的…

JAVA学习9

目录 一.继承 1.继承的原理&#xff1a; 2.继承的细节&#xff1a; 3.继承的本质&#xff1a; 二.super的使用&#xff1a; 1.基本介绍&#xff1a; 2.注意事项与使用细节&#xff1a;&#xff08;1&#xff09;访问父类的属性super.属性名&#xff0c;但不能访问父类的p…

快速从0-1完成聊天室开发——环信ChatroomUIKit功能详解

聊天室是当下泛娱乐社交应用中最经典的玩法&#xff0c;通过调用环信的 IM SDK 接口&#xff0c;可以快速创建聊天室。如果想根据自己业务需求对聊天室应用的 UI界面、弹幕消息、礼物打赏系统等进行自定义设计&#xff0c;最高效的方式则是使用环信的 ChatroomUIKit 。 文档地址…

个税计算器(Python)

任务描述 目前我国个人所得税计算公式如下&#xff1a; 应纳个人所得税税额 (工资薪金所得 -五险一金 - 个税免征额)适用税率-速算扣除数 个税免征额为5000元/月&#xff0c;2018年10月1日起调整后&#xff0c;也就是2018年实行的7级超额累进个人所得税税率表如下&#xff1…

【组合回溯】Leetcode 131. 分割回文串

【组合回溯】Leetcode 131. 分割回文串 解法 切割组合回溯 ---------------&#x1f388;&#x1f388;131. 分割回文串 题目链接&#x1f388;&#x1f388;------------------- 解法 切割组合回溯 全局变量&#xff1a;result存储所有path的集合&#xff0c;path用来记录切…

新!PCA+DBO+K-means聚类,蜣螂优化算法DBO优化K-means,适合学习,也适合发paper。

PCADBOK-means聚类&#xff0c;蜣螂优化算法DBO优化K-means&#xff0c;适合学习&#xff0c;也适合发paper。 一、 蜣螂优化算法 摘要&#xff1a;受蜣螂滚球、跳舞、觅食、偷窃和繁殖等行为的启发&#xff0c;提出了一种新的基于种群的优化算法(Dung Beetle Optimizer, DBO…

拜占庭将军问题相关问题

1、拜占庭将军问题基本描述 问题 当我们讨论区块链共识时&#xff0c;为什么会讨论拜占庭将军问题&#xff1f; 区块链网络的本质是一个分布式系统&#xff0c;在存在恶意节点的情况下&#xff0c;希望 整个系统当中的善良节点能够对于重要的信息达成一致&#xff0c;这个机…

8.6 Springboot项目实战 Spring Cache注解方式使用Redis

文章目录 前言一、配置Spring Cache1. @EnableCaching2. 配置CacheManager3. application.properties配置二、使用注解缓存数据1. 使用**@Cacheable** 改造查询代码2. 使用**@CacheEvict** 改造更新代码前言 在上文中我们使用Redis缓存热点数据时,使用的是手写代码的方式,这…

每日学习笔记:C++ STL 的forward_list

定义 特点 操作函数 元素查找、移除或安插 forward_list::emplace_after arg...指的是元素构造函数的参数&#xff08;0~N个&#xff09; #include <iostream> #include <memory> #include <list> #include <forward_list> using namespace std;class…