企业网站属于广告吗,企业网站模板免费下载,购买网站域名怎么做会计分录,网站策划一 说明 继之前的一篇文章#xff1a;antd5 Tabs 标签头的文本颜色和背景颜色修改 后#xff0c;发现在被修改后的Tab中继续嵌套Tabs组件#xff0c;这个新的Tabs组件样式跟外层Tabs样式也是一致的#xff0c;如下图所示#xff1a; 二 原因 在修改外层tabs样式时antd5 Tabs 标签头的文本颜色和背景颜色修改 后发现在被修改后的Tab中继续嵌套Tabs组件这个新的Tabs组件样式跟外层Tabs样式也是一致的如下图所示 二 原因 在修改外层tabs样式时使用到了antd5中的ConfigProvider通过token进行样式修改。代码如下 ConfigProvidertheme{{components: {Tabs: {cardBg: red // 设置标签背景颜色},},}}Tabstypecarditems{[{label: 第一页,key: 1,children:Tabstypecarditems{[{label: 内部Tab1,key: i-1,children: 我是内部tab的第一页,}, {label: 内部Tab2,key: i-2,children: 我是内部tab的第二页,}]}/,}, {label: 第二页,key: 2,children: Content of Tab Pane,}]}//ConfigProvider
如代码所示外层Tabs中又包含了一个内层的Tab因此内层的Tabs样式也会被 ConfigProvider 所影响导致内层Tab样式跟外层Tab样式一样。
三 解决办法 要想只改变外部Tabs样式而内部样式不变的方法我只知道通过ConfigProvider还原内部Tabs样式。效果如图 测试代码代码如下
import React from react;
import {Tabs, ConfigProvider} from antd;const TestPage: React.FC () {return (divConfigProvidertheme{{components: {Tabs: {cardBg: red // 设置标签背景颜色},},}}Tabstypecarditems{[{label: 第一页,key: 1,children:ConfigProvidertheme{{components: {Tabs: {cardBg: rgba(0, 0, 0, 0.02) // 还原标签背景颜色},},}}Tabstypecarditems{[{label: 内部Tab1,key: i-1,children: 我是内部tab的第一页,}, {label: 内部Tab2,key: i-2,children: 我是内部tab的第二页,}]}/,/ConfigProvider}, {label: 第二页,key: 2,children: Content of Tab Pane,}]}//ConfigProvider/div)
}export default TestPage;
