diff --git a/components/config-provider/__tests__/style.test.tsx b/components/config-provider/__tests__/style.test.tsx
index 586d6ea852..679b1089f0 100644
--- a/components/config-provider/__tests__/style.test.tsx
+++ b/components/config-provider/__tests__/style.test.tsx
@@ -29,6 +29,7 @@ import Spin from '../../spin';
import Steps from '../../steps';
import Switch from '../../switch';
import Table from '../../table';
+import Tabs from '../../tabs';
import Tag from '../../tag';
import Typography from '../../typography';
@@ -653,4 +654,15 @@ describe('ConfigProvider support style and className props', () => {
expect(element).toHaveClass('cp-card');
expect(element).toHaveStyle({ backgroundColor: 'blue' });
});
+
+ it('Should Tabs className & style works', () => {
+ const { container } = render(
+
+
+ ,
+ );
+ const element = container.querySelector('.ant-tabs');
+ expect(element).toHaveClass('cp-tabs');
+ expect(element).toHaveStyle({ backgroundColor: 'red' });
+ });
});
diff --git a/components/config-provider/context.ts b/components/config-provider/context.ts
index aa6dc784f7..7cf60bb079 100644
--- a/components/config-provider/context.ts
+++ b/components/config-provider/context.ts
@@ -120,6 +120,7 @@ export interface ConfigConsumerProps {
tag?: ComponentStyleConfig;
table?: ComponentStyleConfig;
card?: ComponentStyleConfig;
+ tabs?: ComponentStyleConfig;
}
const defaultGetPrefixCls = (suffixCls?: string, customizePrefixCls?: string) => {
diff --git a/components/config-provider/index.en-US.md b/components/config-provider/index.en-US.md
index f6bd453ac6..2ea4d8fb4c 100644
--- a/components/config-provider/index.en-US.md
+++ b/components/config-provider/index.en-US.md
@@ -130,6 +130,7 @@ const {
| spin | Set Spin common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| steps | Set Steps common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| table | Set Table common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| tabs | Set Tabs common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| tag | Set Tag common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| typography | Set Typography common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
diff --git a/components/config-provider/index.tsx b/components/config-provider/index.tsx
index 0b0507fb55..8e6d7247a9 100644
--- a/components/config-provider/index.tsx
+++ b/components/config-provider/index.tsx
@@ -164,6 +164,7 @@ export interface ConfigProviderProps {
tag?: ComponentStyleConfig;
table?: ComponentStyleConfig;
card?: ComponentStyleConfig;
+ tabs?: ComponentStyleConfig;
}
interface ProviderChildrenProps extends ConfigProviderProps {
@@ -280,6 +281,7 @@ const ProviderChildren: React.FC = (props) => {
tag,
table,
card,
+ tabs,
} = props;
// =================================== Warning ===================================
@@ -358,6 +360,7 @@ const ProviderChildren: React.FC = (props) => {
tag,
table,
card,
+ tabs,
};
const config = {
diff --git a/components/config-provider/index.zh-CN.md b/components/config-provider/index.zh-CN.md
index 935a05f33a..589709781a 100644
--- a/components/config-provider/index.zh-CN.md
+++ b/components/config-provider/index.zh-CN.md
@@ -132,6 +132,7 @@ const {
| spin | 设置 Spin 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| steps | 设置 Steps 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| table | 设置 Table 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| tabs | 设置 Tabs 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| tag | 设置 Tag 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| typography | 设置 Typography 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
diff --git a/components/tabs/index.tsx b/components/tabs/index.tsx
index fe80f23189..78b59c8497 100755
--- a/components/tabs/index.tsx
+++ b/components/tabs/index.tsx
@@ -31,23 +31,25 @@ export interface TabsProps extends Omit {
children?: React.ReactNode;
}
-function Tabs({
- type,
- className,
- rootClassName,
- size: customSize,
- onEdit,
- hideAdd,
- centered,
- addIcon,
- popupClassName,
- children,
- items,
- animated,
- ...props
-}: TabsProps) {
- const { prefixCls: customizePrefixCls, moreIcon = } = props;
- const { direction, getPrefixCls, getPopupContainer } = React.useContext(ConfigContext);
+const Tabs: React.FC & { TabPane: typeof TabPane } = (props) => {
+ const {
+ type,
+ className,
+ rootClassName,
+ size: customSize,
+ onEdit,
+ hideAdd,
+ centered,
+ addIcon,
+ popupClassName,
+ children,
+ items,
+ animated,
+ style,
+ ...otherProps
+ } = props;
+ const { prefixCls: customizePrefixCls, moreIcon = } = otherProps;
+ const { direction, tabs, getPrefixCls, getPopupContainer } = React.useContext(ConfigContext);
const prefixCls = getPrefixCls('tabs', customizePrefixCls);
const [wrapSSR, hashId] = useStyle(prefixCls);
@@ -76,32 +78,36 @@ function Tabs({
const size = useSize(customSize);
+ const mergedStyle: React.CSSProperties = { ...tabs?.style, ...style };
+
return wrapSSR(
,
);
-}
+};
Tabs.TabPane = TabPane;