diff --git a/components/back-top/style/index.less b/components/back-top/style/index.less
index f630d5f655..943c483ec6 100644
--- a/components/back-top/style/index.less
+++ b/components/back-top/style/index.less
@@ -17,6 +17,7 @@
   &-rtl {
     right: auto;
     left: 100px;
+    direction: rtl;
   }
 
   &-content {
diff --git a/components/cascader/style/rtl.less b/components/cascader/style/rtl.less
index 9c206339a0..f249379fbd 100644
--- a/components/cascader/style/rtl.less
+++ b/components/cascader/style/rtl.less
@@ -16,6 +16,10 @@
   }
 
   &-picker {
+    &-rtl {
+      direction: rtl;
+    }
+
     &-label {
       .@{picker-rtl-cls} & {
         padding: 0 @control-padding-horizontal 0 20px;
diff --git a/components/checkbox/Checkbox.tsx b/components/checkbox/Checkbox.tsx
index eebe95c873..6628a77216 100644
--- a/components/checkbox/Checkbox.tsx
+++ b/components/checkbox/Checkbox.tsx
@@ -92,7 +92,7 @@ class Checkbox extends React.PureComponent<CheckboxProps, {}> {
     this.rcCheckbox.blur();
   }
 
-  renderCheckbox = ({ getPrefixCls }: ConfigConsumerProps) => {
+  renderCheckbox = ({ getPrefixCls, direction }: ConfigConsumerProps) => {
     const { props, context } = this;
     const {
       prefixCls: customizePrefixCls,
@@ -120,6 +120,7 @@ class Checkbox extends React.PureComponent<CheckboxProps, {}> {
     }
     const classString = classNames(className, {
       [`${prefixCls}-wrapper`]: true,
+      [`${prefixCls}-rtl`]: direction === 'rtl',
       [`${prefixCls}-wrapper-checked`]: checkboxProps.checked,
       [`${prefixCls}-wrapper-disabled`]: checkboxProps.disabled,
     });
diff --git a/components/checkbox/__tests__/__snapshots__/checkbox.test.js.snap b/components/checkbox/__tests__/__snapshots__/checkbox.test.js.snap
index 8e6d96fb87..ae18e74176 100644
--- a/components/checkbox/__tests__/__snapshots__/checkbox.test.js.snap
+++ b/components/checkbox/__tests__/__snapshots__/checkbox.test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`Checkbox rtl render component should be rendered correctly in RTL direction 1`] = `
 <label
-  class="ant-checkbox-wrapper"
+  class="ant-checkbox-wrapper ant-checkbox-rtl"
 >
   <span
     class="ant-checkbox"
diff --git a/components/checkbox/style/rtl.less b/components/checkbox/style/rtl.less
index 03d7d018ac..3f32514c13 100644
--- a/components/checkbox/style/rtl.less
+++ b/components/checkbox/style/rtl.less
@@ -1,6 +1,10 @@
 @import '../../style/mixins/index';
 
 .antCheckboxFn(@checkbox-prefix-cls: ~'@{ant-prefix}-checkbox') {
+  .@{checkbox-prefix-cls}-rtl {
+    direction: rtl;
+  }
+
   .@{checkbox-prefix-cls}-group {
     &-item {
       .@{checkbox-prefix-cls}-group-rtl & {
diff --git a/components/input-number/style/rtl.less b/components/input-number/style/rtl.less
index d4d7c74429..4c076eca2a 100644
--- a/components/input-number/style/rtl.less
+++ b/components/input-number/style/rtl.less
@@ -5,6 +5,10 @@
 @input-number-prefix-cls: ~'@{ant-prefix}-input-number';
 
 .@{input-number-prefix-cls} {
+  &-rtl {
+    direction: rtl;
+  }
+
   &-handler-wrap {
     .@{input-number-prefix-cls}-rtl & {
       right: auto;
diff --git a/components/mentions/__tests__/__snapshots__/index.test.js.snap b/components/mentions/__tests__/__snapshots__/index.test.js.snap
index d2419b5b6c..71885ad54e 100644
--- a/components/mentions/__tests__/__snapshots__/index.test.js.snap
+++ b/components/mentions/__tests__/__snapshots__/index.test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`Mentions rtl render component should be rendered correctly in RTL direction 1`] = `
 <div
-  class="ant-mentions"
+  class="ant-mentions ant-mentions-rtl"
 >
   <textarea
     rows="1"
diff --git a/components/mentions/index.tsx b/components/mentions/index.tsx
index aa6fcf9149..c2387de8ba 100644
--- a/components/mentions/index.tsx
+++ b/components/mentions/index.tsx
@@ -138,7 +138,7 @@ class Mentions extends React.Component<MentionProps, MentionState> {
     this.rcMentions.blur();
   }
 
-  renderMentions = ({ getPrefixCls, renderEmpty }: ConfigConsumerProps) => {
+  renderMentions = ({ getPrefixCls, renderEmpty, direction }: ConfigConsumerProps) => {
     const { focused } = this.state;
     const { prefixCls: customizePrefixCls, className, disabled, ...restProps } = this.props;
     const prefixCls = getPrefixCls('mentions', customizePrefixCls);
@@ -147,6 +147,7 @@ class Mentions extends React.Component<MentionProps, MentionState> {
     const mergedClassName = classNames(className, {
       [`${prefixCls}-disabled`]: disabled,
       [`${prefixCls}-focused`]: focused,
+      [`${prefixCls}-rtl`]: direction === 'rtl',
     });
 
     return (
diff --git a/components/mentions/style/index.less b/components/mentions/style/index.less
index c12a50ab0f..87506f77b0 100644
--- a/components/mentions/style/index.less
+++ b/components/mentions/style/index.less
@@ -165,3 +165,5 @@
     }
   }
 }
+
+@import './rtl';
diff --git a/components/mentions/style/rtl.less b/components/mentions/style/rtl.less
new file mode 100644
index 0000000000..7cd95832dc
--- /dev/null
+++ b/components/mentions/style/rtl.less
@@ -0,0 +1,10 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+
+@mention-prefix-cls: ~'@{ant-prefix}-mentions';
+
+.@{mention-prefix-cls} {
+  &-rtl {
+    direction: rtl;
+  }
+}
diff --git a/components/radio/style/rtl.less b/components/radio/style/rtl.less
index f443bc4d76..9890cf4593 100644
--- a/components/radio/style/rtl.less
+++ b/components/radio/style/rtl.less
@@ -16,6 +16,7 @@
   &&-rtl {
     margin-right: 0;
     margin-left: 8px;
+    direction: rtl;
   }
 }
 
diff --git a/components/table/style/rtl.less b/components/table/style/rtl.less
index 4519b4aa9a..1d59d1f92d 100644
--- a/components/table/style/rtl.less
+++ b/components/table/style/rtl.less
@@ -11,6 +11,10 @@
 }
 
 .@{table-prefix-cls} {
+  &-rtl {
+    direction: rtl;
+  }
+
   table {
     .@{table-wrapepr-rtl-cls} & {
       text-align: right;
diff --git a/components/transfer/__tests__/__snapshots__/index.test.js.snap b/components/transfer/__tests__/__snapshots__/index.test.js.snap
index e789f5703a..561ac456d5 100644
--- a/components/transfer/__tests__/__snapshots__/index.test.js.snap
+++ b/components/transfer/__tests__/__snapshots__/index.test.js.snap
@@ -11,7 +11,7 @@ exports[`Transfer rtl render component should be rendered correctly in RTL direc
       class="ant-transfer-list-header"
     >
       <label
-        class="ant-checkbox-wrapper"
+        class="ant-checkbox-wrapper ant-checkbox-rtl"
       >
         <span
           class="ant-checkbox"
@@ -154,7 +154,7 @@ exports[`Transfer rtl render component should be rendered correctly in RTL direc
       class="ant-transfer-list-header"
     >
       <label
-        class="ant-checkbox-wrapper"
+        class="ant-checkbox-wrapper ant-checkbox-rtl"
       >
         <span
           class="ant-checkbox"
diff --git a/components/upload/style/rtl.less b/components/upload/style/rtl.less
index 3945c4b63d..27abfe9d2d 100644
--- a/components/upload/style/rtl.less
+++ b/components/upload/style/rtl.less
@@ -19,6 +19,9 @@
 }
 
 .@{upload-prefix-cls}-list {
+  &-rtl {
+    direction: rtl;
+  }
   &-item-list-type-text {
     &:hover {
       .@{upload-prefix-cls}-list-item-name-icon-count-1 {