diff --git a/components/breadcrumb/Breadcrumb.tsx b/components/breadcrumb/Breadcrumb.tsx index df8f7ff722..a76b712681 100755 --- a/components/breadcrumb/Breadcrumb.tsx +++ b/components/breadcrumb/Breadcrumb.tsx @@ -119,7 +119,7 @@ export default class Breadcrumb extends React.Component { }); }; - renderBreadcrumb = ({ getPrefixCls }: ConfigConsumerProps) => { + renderBreadcrumb = ({ getPrefixCls, direction }: ConfigConsumerProps) => { let crumbs; const { prefixCls: customizePrefixCls, @@ -154,9 +154,12 @@ export default class Breadcrumb extends React.Component { }); }); } + const breadcrumbClassName = classNames(className, prefixCls, { + [`${prefixCls}-rtl`]: direction === 'rtl', + }); return (
diff --git a/components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.js.snap b/components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.js.snap index 73d60d3f5b..da9edf32fd 100644 --- a/components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.js.snap +++ b/components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.js.snap @@ -34,7 +34,7 @@ exports[`Breadcrumb filter React.Fragment 1`] = ` exports[`Breadcrumb rtl render component should be rendered correctly in RTL direction 1`] = `
`; diff --git a/components/breadcrumb/style/index.less b/components/breadcrumb/style/index.less index 2edaf549c1..20e2cd7607 100644 --- a/components/breadcrumb/style/index.less +++ b/components/breadcrumb/style/index.less @@ -9,6 +9,14 @@ color: @breadcrumb-base-color; font-size: @breadcrumb-font-size; + &-rtl { + direction: rtl; + + > span { + float: right; + } + } + .@{iconfont-css-prefix} { font-size: @breadcrumb-icon-font-size; } @@ -40,12 +48,22 @@ &-link { > .@{iconfont-css-prefix} + span { margin-left: 4px; + + .@{breadcrumb-prefix-cls}-rtl & { + margin-right: 4px; + margin-left: 0; + } } } &-overlay-link { > .@{iconfont-css-prefix} { margin-left: 4px; + + .@{breadcrumb-prefix-cls}-rtl & { + margin-right: 4px; + margin-left: 0; + } } } }