diff --git a/components/tabs/demo/component-token.tsx b/components/tabs/demo/component-token.tsx index 576c777e31..b3b2e9fb60 100644 --- a/components/tabs/demo/component-token.tsx +++ b/components/tabs/demo/component-token.tsx @@ -22,6 +22,7 @@ const App: React.FC = () => ( horizontalItemPaddingLG: `20px`, verticalItemPadding: `8px`, verticalItemMargin: `4px 0 0 0`, + itemColor: 'rgba(0,0,0,0.85)', itemSelectedColor: '#389e0d', itemHoverColor: '#d9f7be', itemActiveColor: '#b7eb8f', diff --git a/components/tabs/style/index.ts b/components/tabs/style/index.ts index 43c2f34dda..bcfd002fd0 100644 --- a/components/tabs/style/index.ts +++ b/components/tabs/style/index.ts @@ -100,6 +100,11 @@ export interface ComponentToken { * @descEN Vertical margin of vertical tab item */ verticalItemMargin: string; + /** + * @desc 标签文本颜色 + * @descEN Text color of tab + */ + itemColor: string; /** * @desc 标签激活态文本颜色 * @descEN Text color of active tab @@ -656,6 +661,7 @@ const genTabStyle: GenerateStyle = (token: TabsToken) => { tabsHorizontalItemMargin, horizontalItemPadding, itemSelectedColor, + itemColor, } = token; const tabCls = `${componentCls}-tab`; @@ -673,6 +679,7 @@ const genTabStyle: GenerateStyle = (token: TabsToken) => { border: 0, outline: 'none', cursor: 'pointer', + color: itemColor, '&-btn, &-remove': { '&:focus:not(:focus-visible), &:active': { color: itemActiveColor, @@ -1052,6 +1059,7 @@ export default genComponentStyleHook( horizontalItemPaddingLG: `${token.padding}px 0`, verticalItemPadding: `${token.paddingXS}px ${token.paddingLG}px`, verticalItemMargin: `${token.margin}px 0 0 0`, + itemColor: token.colorText, itemSelectedColor: token.colorPrimary, itemHoverColor: token.colorPrimaryHover, itemActiveColor: token.colorPrimaryActive,