fix: component style without hash (#46609)

* fix: Select style without hash * fix: common style logic * fix: lint * fix: menu style * chore: update checkbox demo * chore: fix test * chore: rm test
ant-design · Jan 30, 2024 · 441ba5f · 441ba5f
1 parent c61870e
commit 441ba5f
Show file tree

Hide file tree

Showing 7 changed files with 38 additions and 30 deletions.
diff --git 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,
             }}
           >
             <HappyProvider disabled={!theme.includes('happy-work')}>{content}</HappyProvider>

diff --git a/components/checkbox/demo/custom-line-width.tsx b/components/checkbox/demo/custom-line-width.tsx
@@ -5,7 +5,6 @@ const App: React.FC = () => (
   <>
     <ConfigProvider
       theme={{
-        cssVar: false,
         components: {
           Checkbox: {
             lineWidth: 6,

diff --git a/components/config-provider/__tests__/button.test.tsx b/components/config-provider/__tests__/button.test.tsx
@@ -32,7 +32,7 @@ describe('ConfigProvider.button', () => {
 
   it('ConfigProvider button styles', () => {
     const { container } = render(
-      <ConfigProvider button={{ styles: { icon: { color: '#333' } } }}>
+      <ConfigProvider button={{ styles: { icon: { fontSize: 14 } } }}>
         <Button icon={<SearchOutlined />} />
       </ConfigProvider>,
     );

diff --git a/components/menu/style/index.ts b/components/menu/style/index.ts
@@ -687,6 +687,21 @@ const getBaseStyle: GenerateStyle<MenuToken> = (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<MenuToken> = (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
@@ -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
@@ -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
@@ -154,7 +154,7 @@ export default function genComponentStyleHook<C extends OverrideComponent>(
   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<C extends OverrideComponent>(
         });
         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<C extends OverrideComponent>(
 
 export interface SubStyleComponentProps {
   prefixCls: string;
+  rootCls?: string;
 }
 
 // Get from second argument
@@ -272,8 +273,9 @@ export const genSubStyleComponent: <C extends OverrideComponent>(
 
   const StyledComponent: ComponentType<SubStyleComponentProps> = ({
     prefixCls,
+    rootCls = prefixCls,
   }: SubStyleComponentProps) => {
-    useStyle(prefixCls);
+    useStyle(prefixCls, rootCls);
     return null;
   };
 
@@ -406,7 +408,7 @@ export const genStyleHooks = <C extends OverrideComponent>(
   );
 
   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;