前端组件样式穿透修改

news2024/11/28 10:35:04

背景:

在style经常用scoped属性实现组件的私有化时,要改变element-ui某个深层元素(例如.el-input__inner)或其他深层样式, 但是element-ui 并没有提供修改的接口。

这时,就是需要手动修改样式。

解决方法

使用样式穿透
在这里插入图片描述
实例:
代码:

<nut-tabbar unactive-color="#black" active-color="red" bottom v-model="activeTab" v-show="tabbarVisible" @tab-switch=    "tabSwitch">
<nut-tabbar-item v-for="item in tabItem" :key="item.key" :tab-title="$t(`tabbar.${item.key}`)" :icon="item.icon" />
</nut-tabbar>

样式:
在这里插入图片描述
tabbar的默认背景色为白色。 通过给nut-tabbar添加style属性是无法修改其样式的。
修改tabbar背景样式

<style scoped lang="scss">
  div ::v-deep .nut-tabbar {
      border-style: none !important ;
      background: #1a1a1a !important;
   }
 </style>

(说明:nut-tabbar组件在渲染后,对应的css类名为 nut-tabbar, 所以此处实际修改的是类nut-tabbar的样式)
Done !

参考文章:
https://www.cnblogs.com/xwwin/p/16825539.html

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

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

相关文章

UE5近战对抗系统Tutorial

文章目录 BP_Character 组合攻击Notify State 检测攻击BP_Character 攻击反馈BP_Character 生命系统BP_Character 死亡效果BP_Character 武器系统BP_Enemy 初始化和行为树 BP_Character 组合攻击 首先我们获取攻击动画&#xff0c;在这里使用的是 Easy Combo Buffering 的攻击…

2024全国高校名单发布,电子版下载!

今天&#xff0c;教育部网站发布了《全国高等学校名单》。截至2024年6月20日&#xff0c;全国高等学校共计3117所&#xff0c;其中&#xff1a;普通高等学校2868所&#xff0c;含本科学校1308所、高职&#xff08;专科&#xff09;学校1560所&#xff1b;成人高等学校249所。本…

游戏本地化以拓展海外市场

Logrus IT Korea的总监元庆燕&#xff08;KyoungYeon Won&#xff09;发表了一场关于“游戏本地化”的讲座&#xff0c;讲述了独立游戏开发者如何在梦想拓展海外市场的过程中&#xff0c;正确地本地化他们的游戏以满足国际市场的期望&#xff0c;以及实现这一重要任务的过程。 …

集合:泛型深入

一.泛型的好处 1.统一了数据类型 2.把运行时期的问题提前到了编译期间,避免了强制类型转换可能出现的异常,因为在编译阶段类型就能确定下来。 二.泛型的细节 1.泛型中不能写基本数据类型 2.指定泛型的具体类型后,传递数据时,可以传入该类类型或者该类的子类类型 3.如果不…

智能血压计,让健康“听”得见- WT588F02B血压计语音方案

一、语音血压计开发背景&#xff1a; 在快节奏的现代生活中&#xff0c;健康成为了我们最宝贵的财富。而血压&#xff0c;作为反映人体健康状态的重要指标之一&#xff0c;更是需要我们时刻关注。传统的血压计虽然能够为我们提供准确的血压数据&#xff0c;但往往因为操作复杂…

全外显子测序分析流程1 - Fastq质控与去接头、低质量和引物序列

全外显子测序分析流程1 - Fastq质控与去接头、低质量和引物序列 1. 运行实例 # -d 样本根目录 # -s 样本名称 python trim_fastq.py -d /result/WES/sample -s sample2. fastqc质控报告与去接头、低质量序列主程序 对raw fastq和clean fastq生成质控QC报告trim_galore去接头、…

【Android】记录在自己的AMD处理器无法使用Android studio 虚拟机处理过程

文章目录 问题&#xff1a;无法在AMD平台打开Android studio 虚拟机&#xff0c;已解决平台&#xff1a;AMD 5700g系统&#xff1a;win10专业版1、在 amd平台上使用安卓虚拟机需要安装硬件加速器2、关闭win10上的系统服务 问题&#xff1a;无法在AMD平台打开Android studio 虚拟…

京东云 AX1800 Pro 路由器 亚瑟 R2242 u-boot 和 OpenWrt 刷机教程

上周末陪媳妇儿逛街的时候无意中看到了一篇 OpenWrt 的公众号文章&#xff1a;百元京东亚瑟wifi6路由器真香&#xff0c;支持刷OpenWrt系统。 然后&#xff0c;就开启了将近一周的苦逼刷机过程&#xff0c;因为最近工作忙只能利用晚上的时间来搞&#xff0c;刷机用了一天多搞定…

代码随想录算法训练营第30天| 122.买卖股票的最佳时机II、55. 跳跃游戏、 45.跳跃游戏II、 1005.K次取反后最大化的数组和

122.买卖股票的最佳时机II 题目链接&#xff1a;122.买卖股票的最佳时机II 文档讲解&#xff1a;代码随想录 状态&#xff1a;so easy 思路&#xff1a;不用考虑操作的次数&#xff0c;其实只要有赚就拿下就行了。 题解&#xff1a; class Solution {public int maxProfit(in…

大数据经典sql

一、连续登录问题 问题&#xff1a;1&#xff09;、每个用户连续登录最大天数 2&#xff09;、连续登录大于三天的用户数 分析&#xff1a;本质都是计算用户连续登录天数 方案一&#xff1a;利用排序窗口 select a.user_id,a.date_rslt,count(1) as cnt from (select t.…

概率论与数理统计期末复习

概率论常考知识点汇总 总括 1. 基础概率论 概率定义&#xff1a;理解概率是事件发生的可能性度量&#xff0c;范围从0&#xff08;不可能&#xff09;到1&#xff08;必然发生&#xff09;。概率公理&#xff1a;掌握概率的三大公理&#xff0c;即非负性、规范性和可加性。条…

Linux【实操篇-时间日期类 用户和用户组管理】

06 【实操篇-时间日期类 用户和用户组管理】 1.时间日期类 1.1 显示当前日期 基本语法 date (功能描述:显示当前时间)date %Y(功能描述:显示当前年份)date %m(功能描述:显示当前月份)date %d (功能描述:显示当前是哪一天)date "%Y-%m-%d %H:%M:%S" (功能描述:显示…

视频监控平台功能介绍:内部设备管理(rtsp、sdk、onvif、ehome/ISUP、主动注册协议等)

一、功能概述 AS-V1000视频平台是一套集成了用户设备权限管理、视音频监控、大容量存储、电子地图的系统平台软件。它结合了现代视频技术、网络通讯技术、计算机控制技术、流媒体传输技术的综合解决方案&#xff0c;为用户提供了强大的、灵活的组网和应用能力。 AS-V1000管理端…

项目实践---Windows11中安装Zookeeper3.5.5/Hadoop2.7.2/Hive2.3.7

1.背景 项目第一版本使用大数据组件核心版本均为2.x&#xff0c;需要在个人电脑搭建相关大数据环境&#xff0c;这次提供Hadoop2.7.2 Hive2.3.7版本的环境搭建。 2.相关安装包下载 链接&#xff1a;https://pan.baidu.com/s/1tkYr1UpqMKKVJHY5cfvVSw?pwddcxd 提取码&…

基于STM32的智能插座项目

本项目基于stm32f103c8t6芯片通过集成众多模块和元器件&#xff0c;通过ESP01-S和阿里云平台实现智能插座的项目开展。资料获取到咸&#x1f41f;&#xff1a;xy591215295250 \\\或者联系wechat 号&#xff1a;comprehensivable 随着电子科学与技术的快速发展&#xff0c;软硬件…

qt 如何获取磁盘信息、QStorageInfo

以往获取qt磁盘信息&#xff0c;笔者是通过一下API转换的 BOOL GetDiskFreeSpaceExW([in, optional] LPCWSTR lpDirectoryName,[out, optional] PULARGE_INTEGER lpFreeBytesAvailableToCaller,[out, optional] PULARGE_INTEGER lpTotalNumberOfBytes,[out, optional…

10地!2024年一级造价师报名通知发布!

各位考生注意&#xff0c;西藏、四川、江西、新疆&#xff0c;辽宁、江苏、云南、新疆兵团、海南10个地区已经发布了关于2024年度一级造价工程师职业资格考试报名工作的通知&#xff1a; 浙江 辽宁 江苏 云南 报名时间&#xff1a;6月28日9:00—7月8日17:00&#xff1b; 缴费时…

spacetitanic 使用决策树分类

Spaceship Titanic | Kagglehttps://www.kaggle.com/competitions/spaceship-titanic 导入数据分析及调用接口所需库 读取csv文件数据并使用.head()查看头部信息 描述数据&#xff0c;使用.info()函数获取对象的详细信息 通过.describe()方法会生成一个统计摘要&#xff0c;并…

Linux 之内存管理 -free 和 RSS/RES的意义

一、free -h 计算关系&#xff1a; available free buff/cache total used availbleshared 参数 说明 total 总计物理内存的大小 used 已使用的物理内存的大小 free 可用物理内存有多少 shared 多个进程共享的内存总额 buff/cache 写入和读取 磁盘内存缓冲区的大小 avail…

SRM供应商管理系统是什么?企业为何都非常重视供应商管理?

企业与供应商之间的关系就像一张错综复杂的网&#xff0c;维系着生产的顺利进行。但是&#xff0c;这张网也时常让企业感到焦虑和困扰。例如&#xff0c; 如何准确地评估供应商的信誉和实力&#xff1f; 如何高效地与众多供应商沟通&#xff0c;确保信息的及时传递和反馈&…