Merge pull request #618 from yatessss/fix/breadcrumb-class

fix(breadcrumb): 面包屑初始样式被覆盖
Tencent · Apr 14, 2022 · 759ca48 · 759ca48
2 parents b278a54 + cab8450
commit 759ca48
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 5 deletions.
diff --git a/src/breadcrumb/Breadcrumb.tsx b/src/breadcrumb/Breadcrumb.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import classNames from 'classnames';
 import useConfig from '../_util/useConfig';
 import forwardRefWithStatics from '../_util/forwardRefWithStatics';
 import { BreadcrumbItem } from './BreadcrumbItem';
@@ -7,7 +8,7 @@ import { BreadcrumbContext } from './BreadcrumbContext';
 
 const Breadcrumb = forwardRefWithStatics(
   (props: BreadcrumbProps, ref) => {
-    const { children, options, separator, maxItemWidth, theme, ...restProps } = props;
+    const { children, options, separator, maxItemWidth, theme, className, ...restProps } = props;
     const { classPrefix } = useConfig();
 
     let content = children;
@@ -38,7 +39,7 @@ const Breadcrumb = forwardRefWithStatics(
           separator,
         }}
       >
-        <div ref={ref} className={`${classPrefix}-breadcrumb`} {...restProps}>
+        <div ref={ref} className={classNames(`${classPrefix}-breadcrumb`, className)} {...restProps}>
           {content}
         </div>
       </BreadcrumbContext.Provider>

diff --git a/src/breadcrumb/BreadcrumbItem.tsx b/src/breadcrumb/BreadcrumbItem.tsx
@@ -9,8 +9,20 @@ import { BreadcrumbItemProps } from './BreadcrumbProps';
 import { BreadcrumbContext } from './BreadcrumbContext';
 
 export const BreadcrumbItem = forwardRef<HTMLDivElement, BreadcrumbItemProps>((props, ref) => {
-  const { children, separator, disabled, maxItemWidth, maxWidth, href, to, target, router, replace, ...restProps } =
-    props;
+  const {
+    children,
+    separator,
+    disabled,
+    maxItemWidth,
+    maxWidth,
+    href,
+    to,
+    target,
+    router,
+    replace,
+    className,
+    ...restProps
+  } = props;
 
   const { maxItemWidthInContext, theme, separator: separatorInContext } = useContext(BreadcrumbContext);
 
@@ -58,7 +70,7 @@ export const BreadcrumbItem = forwardRef<HTMLDivElement, BreadcrumbItemProps>((p
   );
 
   return (
-    <div className={classNames(breadcrumbItemClassNames, theme)} ref={ref} {...restProps}>
+    <div className={classNames(breadcrumbItemClassNames, theme, className)} ref={ref} {...restProps}>
       {itemContent}
       <span className={separatorClassName}>{separatorContent}</span>
     </div>