react经验14:动态修改第三方组件的样式

应用场景

已知第三方组件提供了少许的属性用于程序控制部分样式,现在要求能控制所有细节。

实现方式

核心思路:使用css变量

这里以antd组件库的Tabs控件为例,控制Tabs被选中的页签字体样式。

定义css class,这里用的sass

.tabs{
	--active-fontfamily: inherit;
    --active-fontsize  : inherit;
    --active-fontweight: inherit;
    --active-fontcolor : inherit;
    --active-fontstyle : inherit;
    //事先通过F12工具找到控件使用的class
    .ant-tabs-tab.ant-tabs-tab-active {
        .ant-tabs-tab-btn {
            font-family: var(--active-fontfamily);
            font-size  : var(--active-fontsize);
            font-weight: var(--active-fontweight);
            font-style : var(--active-fontstyle);
            color      : var(--active-fontcolor);
        }
    }
}

组件逻辑

<Tabs rootClassName="tabs" items={[
	{key:'1',label:'tab1',children:'tab1pane'},
	{key:'2',label:'tab2',children:'tab2pane'},
]}/>
const [conf,setConf]=useState({
	active_fontfamily:'微软雅黑',
	active_fontsize:14,
	active_fontweight:500,
	active_fontstyle:'italic',
	active_fontcolor:'#66ffcc'
})
useEffect(()=>{
	//由于ts类型限制,如果直接写在style里会校验不过,因此主动取dom对象赋值
	const tabs = document.querySelector('.tabs') as HTMLDivElement
	if(tabs){
		tabs.style.setProperty('--active-fontfamily', conf.active_fontfamily)
        tabs.style.setProperty('--active-fontsize', conf.active_fontsize)
        tabs.style.setProperty('--active-fontweight', conf.active_fontweight)
        tabs.style.setProperty('--active-fontcolor', conf.active_fontcolor)
        tabs.style.setProperty('--active-fontstyle', conf.active_fontstyle)
	}
},[conf])

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

MyBatisPlus分页查询的使用

一、导入依赖 <!-- MyBatis-plus的依赖 --> <dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-boot-starter</artifactId><version>3.5.4</version> </dependency><!-- mysql的依赖 --> &l…

C# Solidworks二次开发:枚举应用实战(第三讲)

大家好&#xff0c;今天继续介绍枚举相关内容。 下面是今天要介绍的枚举&#xff1a; &#xff08;1&#xff09;第一个为swACisOutputVersion&#xff0c;这个枚举为ACIS的版本&#xff0c;下面是官方的具体解释&#xff1a; 其枚举值为&#xff1a; MemberDescriptionswAc…

JVM支持的可配置参数查看和分类

JVM参数大致可以分为三类: 标注指令:-开头。 这些是所有的HotSpot都支持的参数。可以用java-help 打印出来。 非标准指令: -X开头。 这些指令通常是跟特定的HotSpot版本对应的。可以用java -X打印出来。 不稳定参数: -XX 开头。 这一类参数是跟特定HotSpot版本对应的&#x…

【简单介绍下机器学习之sklearn基础】

&#x1f3a5;博主&#xff1a;程序员不想YY啊 &#x1f4ab;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家 &#x1f917;点赞&#x1f388;收藏⭐再看&#x1f4ab;养成习惯 ✨希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出…

【注解和反射】获取类运行时结构

继上一篇博客【注解和反射】类加载器-CSDN博客 目录 七、获取类运行时结构 测试 getFields()和getDeclaredFields() getMethods()和getDeclaredMethods() 七、获取类运行时结构 获取类运行时结构通常指的是在Java等面向对象编程语言中&#xff0c;使用反射&#xff08;Ref…

Linux 小技巧1

目录 一. 统计文件的总行数二. 获取从第二行开始的内容三. 合并两个文件为一个文件四. 统计指定列唯一值的数量五. 列出文件的绝对路径六. 获取除了空白行和注释之外的部分 一. 统计文件的总行数 ⏹非压缩文件 统计当前文件夹下csv文件的行数 wc -l ./*.csv统计指定文件夹下…

华为OD机试 - 跳格子3 - 动态规划(Java 2024 C卷 200分)

华为OD机试 2024C卷题库疯狂收录中&#xff0c;刷题点这里 专栏导读 本专栏收录于《华为OD机试&#xff08;JAVA&#xff09;真题&#xff08;A卷B卷C卷&#xff09;》。 刷的越多&#xff0c;抽中的概率越大&#xff0c;每一题都有详细的答题思路、详细的代码注释、样例测试…

软件测试之【软件测试概论三】

读者大大们好呀&#xff01;&#xff01;!☀️☀️☀️ &#x1f525; 欢迎来到我的博客 &#x1f440;期待大大的关注哦❗️❗️❗️ &#x1f680;欢迎收看我的主页文章➡️寻至善的主页 文章目录 前言测试用例的前因后果测试用例的设计方法黑盒测试用例设计方法&#x1f525…

深度学习基础:循环神经网络中的Dropout

深度学习基础&#xff1a;循环神经网络中的Dropout 在深度学习中&#xff0c;过拟合是一个常见的问题&#xff0c;特别是在循环神经网络&#xff08;RNN&#xff09;等复杂模型中。为了应对过拟合问题&#xff0c;研究者们提出了许多方法&#xff0c;其中一种被广泛应用的方法…

vue cli3开发自己的插件发布到npm

具体流程如下&#xff1a; 1、创建一个vue项目 vue create project 2、编写组件 &#xff08;1&#xff09;新建一个plugins文件夹&#xff08;可自行创建&#xff09; &#xff08;2&#xff09;新建Button组件 &#xff08;3&#xff09;组件挂载&#xff0c;为组件提供 in…

VMWare里Centos系统下使用Bonding技术实现两块网卡绑定

一、Bonding技术的好处 bonding(绑定)是一种linux系统下的网卡绑定技术&#xff0c;可以把服务器上n个物理网卡在系统内部抽象(绑定)成一个逻辑上的网卡&#xff0c;实现本地网卡的冗余&#xff0c;带宽扩容和负载均衡。 Bonding技术可以设置七中工作模式&#xff0c;常用的有…

【git学习】Git 的基本操作

文章目录 &#x1f680;创建 Git 本地仓库&#x1f680;配置 Git&#x1f680;认识⼯作区、暂存区、版本库&#x1f680;添加⽂件操作 &#x1f680;创建 Git 本地仓库 仓库是进⾏版本控制的⼀个⽂件⽬录。我们要想对⽂件进⾏版本控制&#xff0c;就必须先创建⼀个仓库出来。 …

WPS二次开发系列:WPS SDK打开在线文档

作者持续关注WPS二次开发专题系列&#xff0c;持续为大家带来更多有价值的WPS开发技术细节&#xff0c;如果能够帮助到您&#xff0c;请帮忙来个一键三连&#xff0c;更多问题请联系我&#xff08;QQ:250325397&#xff09; 目录 需求场景 效果展示 3、实现步骤 3.1 步骤一、申…

解释PostgreSQL中的MVCC(多版本并发控制)机制是如何工作的?

文章目录 MVCC的工作原理1. 数据行版本化2. 事务ID和可见性3. 清理旧版本 解决方案&#xff1a;MVCC的优势1. 高并发性2. 避免锁竞争3. 一致性视图 示例代码 PostgreSQL中的MVCC&#xff08;多版本并发控制&#xff09;机制是一种在数据库管理系统中实现事务隔离级别的方法&…

互联网大厂ssp面经,数据结构part3

1. 哈希表的原理是什么&#xff1f;如何解决哈希碰撞问题&#xff1f; a. 原理&#xff1a;通过哈希函数将每个键映射到一个唯一的索引位置&#xff0c;然后将值存储在对应索引位置的存储桶中。 b. 关键&#xff1a;将不同的键映射到不同的索引位置&#xff0c;以实现快速的插…

Elasticsearch下载

1 最新版下载地址 Download Elasticsearch | Elastic https://www.elastic.co/cn/downloads/elasticsearch 2 其他版本下载地址 https://www.elastic.co/cn/downloads/past-releases#elasticsearch 7.9.2:https://artifacts.elastic.co/downloads/elasticsearch/elasticsear…

STM32的定时器

一、介绍 定时器的工作原理 通用定时器的介绍 定时器的计数模式 定时器时钟源 定时器溢出时间计算公式 二、使用定时器中断点亮LED灯 打开一个LED灯 更改TIME2 然后就是生成代码 三&#xff0c;代码

使用 PhpMyAdmin 安装 LAMP 服务器

使用 PhpMyAdmin 安装 LAMP 服务器非常简单。按照下面所示的步骤&#xff0c;我们将拥有一个完全可运行的 LAMP 服务器&#xff08;Linux、Apache、MySQL/MariaDB 和 PHP&#xff09;。 什么是 LAMP 服务器&#xff1f; LAMP 代表 Linux、Apache、MySQL 和 PHP。它们共同提供…

Linux网络编程---Socket编程

一、网络套接字 一个文件描述符指向一个套接字(该套接字内部由内核借助两个缓冲区实现。) 在通信过程中&#xff0c;套接字一定是成对出现的 套接字通讯原理示意图&#xff1a; 二、预备知识 1. 网络字节序 内存中的多字节数据相对于内存地址有大端和小端之分 小端法&…

状态模式和策略模式对比

状态模式和策略模式都是行为型设计模式&#xff0c;它们的主要目标都是将变化的行为封装起来&#xff0c;使得程序更加灵活和可维护。之所以将状态模式和策略模式进行比较&#xff0c;主要是因为两个设计模式的类图相似度较高。但是&#xff0c;从状态模式和策略模式的应用场景…
最新文章