diff --git a/.dumi/theme/layouts/GlobalLayout.tsx b/.dumi/theme/layouts/GlobalLayout.tsx
index b32f9e7d448a..5ad0364b287c 100644
--- a/.dumi/theme/layouts/GlobalLayout.tsx
+++ b/.dumi/theme/layouts/GlobalLayout.tsx
@@ -198,6 +198,7 @@ const GlobalLayout: React.FC = () => {
motion: !theme.includes('motion-off'),
},
cssVar: true,
+ hashed: false,
}}
>
{content}
diff --git a/components/checkbox/demo/custom-line-width.tsx b/components/checkbox/demo/custom-line-width.tsx
index 645abe7e2682..c2f6c36da208 100644
--- a/components/checkbox/demo/custom-line-width.tsx
+++ b/components/checkbox/demo/custom-line-width.tsx
@@ -5,7 +5,6 @@ const App: React.FC = () => (
<>
{
it('ConfigProvider button styles', () => {
const { container } = render(
-
+
} />
,
);
diff --git a/components/menu/style/index.ts b/components/menu/style/index.ts
index 36a774741e90..2c8ae6f86572 100644
--- a/components/menu/style/index.ts
+++ b/components/menu/style/index.ts
@@ -687,6 +687,21 @@ const getBaseStyle: GenerateStyle = (token) => {
opacity: 0,
content: '""',
},
+
+ [`> ${componentCls}`]: {
+ borderRadius: borderRadiusLG,
+
+ ...genMenuItemStyle(token),
+ ...genSubMenuArrowStyle(token),
+
+ [`${componentCls}-item, ${componentCls}-submenu > ${componentCls}-submenu-title`]: {
+ borderRadius: subMenuItemBorderRadius,
+ },
+
+ [`${componentCls}-submenu-title::after`]: {
+ transition: `transform ${motionDurationSlow} ${motionEaseInOut}`,
+ },
+ },
},
// https://github.com/ant-design/ant-design/issues/13955
@@ -750,21 +765,6 @@ const getBaseStyle: GenerateStyle = (token) => {
`]: {
paddingTop: token.paddingXS,
},
-
- [`> ${componentCls}`]: {
- borderRadius: borderRadiusLG,
-
- ...genMenuItemStyle(token),
- ...genSubMenuArrowStyle(token),
-
- [`${componentCls}-item, ${componentCls}-submenu > ${componentCls}-submenu-title`]: {
- borderRadius: subMenuItemBorderRadius,
- },
-
- [`${componentCls}-submenu-title::after`]: {
- transition: `transform ${motionDurationSlow} ${motionEaseInOut}`,
- },
- },
},
...genSubMenuArrowStyle(token),
diff --git a/components/menu/style/theme.ts b/components/menu/style/theme.ts
index d76f89b9657e..b2a0f37b18c7 100644
--- a/components/menu/style/theme.ts
+++ b/components/menu/style/theme.ts
@@ -71,6 +71,13 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation
},
},
+ [`${componentCls}-item, ${componentCls}-submenu-title`]: {
+ color: itemColor,
+ [`&:not(${componentCls}-item-disabled):focus-visible`]: {
+ ...accessibilityFocus(token),
+ },
+ },
+
// Disabled
[`${componentCls}-item-disabled, ${componentCls}-submenu-disabled`]: {
color: `${itemDisabledColor} !important`,
@@ -149,12 +156,6 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation
},
},
- [`${componentCls}-item, ${componentCls}-submenu-title`]: {
- [`&:not(${componentCls}-item-disabled):focus-visible`]: {
- ...accessibilityFocus(token),
- },
- },
-
[`&${componentCls}-submenu > ${componentCls}`]: {
backgroundColor: menuSubMenuBg,
},
diff --git a/components/style/index.ts b/components/style/index.ts
index 5b46e7f353ab..b42d1bae65fc 100644
--- a/components/style/index.ts
+++ b/components/style/index.ts
@@ -102,10 +102,15 @@ export const genLinkStyle = (token: DerivativeToken): CSSObject => ({
},
});
-export const genCommonStyle = (token: DerivativeToken, componentPrefixCls: string): CSSObject => {
+export const genCommonStyle = (
+ token: DerivativeToken,
+ componentPrefixCls: string,
+ rootCls?: string,
+): CSSObject => {
const { fontFamily, fontSize } = token;
- const rootPrefixSelector = `[class^="${componentPrefixCls}"], [class*=" ${componentPrefixCls}"]`;
+ const prefixSelector = `[class^="${componentPrefixCls}"], [class*=" ${componentPrefixCls}"]`;
+ const rootPrefixSelector = rootCls ? `.${rootCls}` : prefixSelector;
return {
[rootPrefixSelector]: {
@@ -117,7 +122,7 @@ export const genCommonStyle = (token: DerivativeToken, componentPrefixCls: strin
boxSizing: 'border-box',
},
- [rootPrefixSelector]: {
+ [prefixSelector]: {
boxSizing: 'border-box',
'&::before, &::after': {
diff --git a/components/theme/util/genComponentStyleHook.tsx b/components/theme/util/genComponentStyleHook.tsx
index 0412f2831c70..b7ed08d6b345 100644
--- a/components/theme/util/genComponentStyleHook.tsx
+++ b/components/theme/util/genComponentStyleHook.tsx
@@ -154,7 +154,7 @@ export default function genComponentStyleHook(
const [component] = cells;
const concatComponent = cells.join('-');
- return (prefixCls: string): UseComponentStyleResult => {
+ return (prefixCls: string, rootCls: string = prefixCls): UseComponentStyleResult => {
const [theme, realToken, hashId, token, cssVar] = useToken();
const { getPrefixCls, iconPrefixCls, csp } = useContext(ConfigContext);
const rootPrefixCls = getPrefixCls();
@@ -241,7 +241,7 @@ export default function genComponentStyleHook(
});
flush(component, componentToken);
return [
- options.resetStyle === false ? null : genCommonStyle(mergedToken, prefixCls),
+ options.resetStyle === false ? null : genCommonStyle(mergedToken, prefixCls, rootCls),
styleInterpolation,
];
},
@@ -253,6 +253,7 @@ export default function genComponentStyleHook(
export interface SubStyleComponentProps {
prefixCls: string;
+ rootCls?: string;
}
// Get from second argument
@@ -272,8 +273,9 @@ export const genSubStyleComponent: (
const StyledComponent: ComponentType = ({
prefixCls,
+ rootCls = prefixCls,
}: SubStyleComponentProps) => {
- useStyle(prefixCls);
+ useStyle(prefixCls, rootCls);
return null;
};
@@ -406,7 +408,7 @@ export const genStyleHooks = (
);
return (prefixCls: string, rootCls: string = prefixCls) => {
- const [, hashId] = useStyle(prefixCls);
+ const [, hashId] = useStyle(prefixCls, rootCls);
const [wrapCSSVar, cssVarCls] = useCSSVar(rootCls);
return [wrapCSSVar, hashId, cssVarCls] as const;