diff --git a/components/button/style/index.less b/components/button/style/index.less
index f0d345307a..d36250db63 100644
--- a/components/button/style/index.less
+++ b/components/button/style/index.less
@@ -1,6 +1,7 @@
 @import '../../style/themes/index';
 @import '../../style/mixins/index';
 @import './mixin';
+@import './rtl';
 
 @btn-prefix-cls: ~'@{ant-prefix}-btn';
 
@@ -22,10 +23,6 @@
   line-height: @line-height-base;
   .btn;
   .btn-default;
-
-  &-rtl {
-    direction: rtl;
-  }
   // Make sure that the target of Button's click event always be `button`
   // Ref: https://github.com/ant-design/ant-design/issues/7034
   > i,
@@ -61,17 +58,8 @@
     .@{btn-prefix-cls}-group & + & {
       border-left-color: @btn-group-border;
 
-      .@{btn-prefix-cls}-group-rtl& {
-        border-right-color: @btn-group-border;
-        border-left-color: @btn-default-border;
-      }
       &[disabled] {
         border-left-color: @btn-default-border;
-
-        .@{btn-prefix-cls}-group-rtl& {
-          border-right-color: @btn-default-border;
-          border-left-color: @btn-group-border;
-        }
       }
     }
   }
@@ -169,36 +157,16 @@
   &&-loading:not(&-circle):not(&-circle-outline):not(&-icon-only) {
     padding-left: 29px;
 
-    .@{btn-prefix-cls}-rtl& {
-      padding-right: 29px;
-      padding-left: @padding-md - 1px;
-    }
-
     .@{iconfont-css-prefix}:not(:last-child) {
       margin-left: -14px;
-
-      .@{btn-prefix-cls}-rtl& {
-        margin-right: -14px;
-        margin-left: 0;
-      }
     }
   }
 
   &-sm&-loading:not(&-circle):not(&-circle-outline):not(&-icon-only) {
     padding-left: 24px;
 
-    .@{btn-prefix-cls}-rtl& {
-      padding-right: 24px;
-      padding-left: @padding-xs - 1px;
-    }
-
     .@{iconfont-css-prefix} {
       margin-left: -17px;
-
-      .@{btn-prefix-cls}-rtl& {
-        margin-right: -17px;
-        margin-left: 0;
-      }
     }
   }
 
@@ -216,11 +184,6 @@
   > .@{iconfont-css-prefix} + span,
   > span + .@{iconfont-css-prefix} {
     margin-left: 8px;
-
-    .@{btn-prefix-cls}-rtl& {
-      margin-right: 8px;
-      margin-left: 0;
-    }
   }
 
   &-background-ghost {
diff --git a/components/button/style/mixin.less b/components/button/style/mixin.less
index c8245d7a62..581ac2a3ab 100644
--- a/components/button/style/mixin.less
+++ b/components/button/style/mixin.less
@@ -1,3 +1,5 @@
+@import './mixin.rtl.less';
+
 // mixins for button
 // ------------------------
 .button-size(@height; @padding-horizontal; @font-size; @border-radius) {
@@ -408,10 +410,6 @@
   & + .@{btnClassName},
   & + & {
     margin-left: -1px;
-    .@{btnClassName}-rtl& {
-      margin-right: -1px;
-      margin-left: auto;
-    }
   }
   .@{btnClassName}-primary + .@{btnClassName}:not(.@{btnClassName}-primary):not([disabled]) {
     border-left-color: transparent;
@@ -419,9 +417,6 @@
   .@{btnClassName} {
     border-radius: 0;
   }
-  &.@{btnClassName}-group-rtl {
-    direction: rtl;
-  }
   > .@{btnClassName}:first-child,
   > span:first-child > .@{btnClassName} {
     margin-left: 0;
@@ -436,23 +431,11 @@
   > span:first-child:not(:last-child) > .@{btnClassName} {
     border-top-left-radius: @btn-border-radius-base;
     border-bottom-left-radius: @btn-border-radius-base;
-    .@{btnClassName}-group-rtl& {
-      border-top-left-radius: 0;
-      border-top-right-radius: @btn-border-radius-base;
-      border-bottom-right-radius: @btn-border-radius-base;
-      border-bottom-left-radius: 0;
-    }
   }
   > .@{btnClassName}:last-child:not(:first-child),
   > span:last-child:not(:first-child) > .@{btnClassName} {
     border-top-right-radius: @btn-border-radius-base;
     border-bottom-right-radius: @btn-border-radius-base;
-    .@{btnClassName}-group-rtl& {
-      border-top-left-radius: @btn-border-radius-base;
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-      border-bottom-left-radius: @btn-border-radius-base;
-    }
   }
   &-sm {
     > .@{btnClassName}:only-child {
@@ -465,23 +448,11 @@
     > span:first-child:not(:last-child) > .@{btnClassName} {
       border-top-left-radius: @btn-border-radius-sm;
       border-bottom-left-radius: @btn-border-radius-sm;
-      .@{btnClassName}-group-rtl& {
-        border-top-left-radius: 0;
-        border-top-right-radius: @btn-border-radius-sm;
-        border-bottom-right-radius: @btn-border-radius-sm;
-        border-bottom-left-radius: 0;
-      }
     }
     > .@{btnClassName}:last-child:not(:first-child),
     > span:last-child:not(:first-child) > .@{btnClassName} {
       border-top-right-radius: @btn-border-radius-sm;
       border-bottom-right-radius: @btn-border-radius-sm;
-      .@{btnClassName}-group-rtl& {
-        border-top-left-radius: @btn-border-radius-sm;
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-        border-bottom-left-radius: @btn-border-radius-sm;
-      }
     }
   }
   & > & {
diff --git a/components/button/style/mixin.rtl.less b/components/button/style/mixin.rtl.less
new file mode 100644
index 0000000000..195d2550a5
--- /dev/null
+++ b/components/button/style/mixin.rtl.less
@@ -0,0 +1,54 @@
+.btn-group(@btnClassName: btn) {
+  & + & {
+    .@{btnClassName}-rtl& {
+      margin-right: -1px;
+      margin-left: auto;
+    }
+  }
+
+  &.@{btnClassName}-group-rtl {
+    direction: rtl;
+  }
+
+  > .@{btnClassName}:first-child:not(:last-child),
+  > span:first-child:not(:last-child) > .@{btnClassName} {
+    .@{btnClassName}-group-rtl& {
+      border-top-left-radius: 0;
+      border-top-right-radius: @btn-border-radius-base;
+      border-bottom-right-radius: @btn-border-radius-base;
+      border-bottom-left-radius: 0;
+    }
+  }
+
+  > .@{btnClassName}:last-child:not(:first-child),
+  > span:last-child:not(:first-child) > .@{btnClassName} {
+    .@{btnClassName}-group-rtl& {
+      border-top-left-radius: @btn-border-radius-base;
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+      border-bottom-left-radius: @btn-border-radius-base;
+    }
+  }
+
+  &-sm {
+    > .@{btnClassName}:first-child:not(:last-child),
+    > span:first-child:not(:last-child) > .@{btnClassName} {
+      .@{btnClassName}-group-rtl& {
+        border-top-left-radius: 0;
+        border-top-right-radius: @btn-border-radius-sm;
+        border-bottom-right-radius: @btn-border-radius-sm;
+        border-bottom-left-radius: 0;
+      }
+    }
+
+    > .@{btnClassName}:last-child:not(:first-child),
+    > span:last-child:not(:first-child) > .@{btnClassName} {
+      .@{btnClassName}-group-rtl& {
+        border-top-left-radius: @btn-border-radius-sm;
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+        border-bottom-left-radius: @btn-border-radius-sm;
+      }
+    }
+  }
+}
diff --git a/components/button/style/rtl.less b/components/button/style/rtl.less
new file mode 100644
index 0000000000..8f90eda68d
--- /dev/null
+++ b/components/button/style/rtl.less
@@ -0,0 +1,62 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+
+@btn-prefix-cls: ~'@{ant-prefix}-btn';
+
+.@{btn-prefix-cls} {
+  &-rtl {
+    direction: rtl;
+  }
+
+  &-primary {
+    .@{btn-prefix-cls}-group &:last-child:not(:first-child),
+    .@{btn-prefix-cls}-group & + & {
+      .@{btn-prefix-cls}-group-rtl& {
+        border-right-color: @btn-group-border;
+        border-left-color: @btn-default-border;
+      }
+      &[disabled] {
+        .@{btn-prefix-cls}-group-rtl& {
+          border-right-color: @btn-default-border;
+          border-left-color: @btn-group-border;
+        }
+      }
+    }
+  }
+
+  &&-loading:not(&-circle):not(&-circle-outline):not(&-icon-only) {
+    .@{btn-prefix-cls}-rtl& {
+      padding-right: 29px;
+      padding-left: @padding-md - 1px;
+    }
+
+    .@{iconfont-css-prefix}:not(:last-child) {
+      .@{btn-prefix-cls}-rtl& {
+        margin-right: -14px;
+        margin-left: 0;
+      }
+    }
+  }
+
+  &-sm&-loading:not(&-circle):not(&-circle-outline):not(&-icon-only) {
+    .@{btn-prefix-cls}-rtl& {
+      padding-right: 24px;
+      padding-left: @padding-xs - 1px;
+    }
+
+    .@{iconfont-css-prefix} {
+      .@{btn-prefix-cls}-rtl& {
+        margin-right: -17px;
+        margin-left: 0;
+      }
+    }
+  }
+
+  > .@{iconfont-css-prefix} + span,
+  > span + .@{iconfont-css-prefix} {
+    .@{btn-prefix-cls}-rtl& {
+      margin-right: 8px;
+      margin-left: 0;
+    }
+  }
+}
diff --git a/components/grid/style/index.less b/components/grid/style/index.less
index f5518a6bb1..4c2e7eba9d 100644
--- a/components/grid/style/index.less
+++ b/components/grid/style/index.less
@@ -1,6 +1,7 @@
 @import '../../style/themes/index';
 @import '../../style/mixins/index';
 @import './mixin';
+@import './rtl';
 
 // Grid system
 .@{ant-prefix}-row {
@@ -11,10 +12,6 @@
   &::after {
     display: flex;
   }
-
-  &-rtl {
-    direction: rtl;
-  }
 }
 
 // x轴原点
@@ -63,10 +60,6 @@
   max-width: 100%;
   // Prevent columns from collapsing when empty
   min-height: 1px;
-
-  &&-rtl {
-    float: right;
-  }
 }
 
 .make-grid();
diff --git a/components/grid/style/mixin.less b/components/grid/style/mixin.less
index 718fcf997b..7f12b1cb59 100644
--- a/components/grid/style/mixin.less
+++ b/components/grid/style/mixin.less
@@ -1,4 +1,5 @@
 @import '../../style/mixins/index';
+@import './mixin.rtl.less';
 
 // mixins for grid system
 // ------------------------
@@ -11,30 +12,12 @@
   }
   .@{ant-prefix}-col@{class}-push-@{index} {
     left: percentage((@index / @grid-columns));
-
-    // reset property in RTL direction
-    &.@{ant-prefix}-col-rtl {
-      right: percentage((@index / @grid-columns));
-      left: auto;
-    }
   }
   .@{ant-prefix}-col@{class}-pull-@{index} {
     right: percentage((@index / @grid-columns));
-
-    // reset property in RTL direction
-    &.@{ant-prefix}-col-rtl {
-      right: auto;
-      left: percentage((@index / @grid-columns));
-    }
   }
   .@{ant-prefix}-col@{class}-offset-@{index} {
     margin-left: percentage((@index / @grid-columns));
-
-    // reset property in RTL direction
-    &.@{ant-prefix}-col-rtl {
-      margin-right: percentage((@index / @grid-columns));
-      margin-left: 0;
-    }
   }
   .@{ant-prefix}-col@{class}-order-@{index} {
     order: @index;
@@ -48,39 +31,18 @@
   }
   .@{ant-prefix}-col-push-@{index} {
     left: auto;
-
-    // reset property in RTL direction
-    &.@{ant-prefix}-col-rtl {
-      right: auto;
-    }
   }
   .@{ant-prefix}-col-pull-@{index} {
     right: auto;
-
-    &.@{ant-prefix}-col-rtl {
-      left: auto;
-    }
   }
   .@{ant-prefix}-col@{class}-push-@{index} {
     left: auto;
-
-    &.@{ant-prefix}-col-rtl {
-      right: auto;
-    }
   }
   .@{ant-prefix}-col@{class}-pull-@{index} {
     right: auto;
-
-    &.@{ant-prefix}-col-rtl {
-      left: auto;
-    }
   }
   .@{ant-prefix}-col@{class}-offset-@{index} {
     margin-left: 0;
-
-    &.@{ant-prefix}-col-rtl {
-      margin-right: 0;
-    }
   }
   .@{ant-prefix}-col@{class}-order-@{index} {
     order: 0;
diff --git a/components/grid/style/mixin.rtl.less b/components/grid/style/mixin.rtl.less
new file mode 100644
index 0000000000..accb844dbd
--- /dev/null
+++ b/components/grid/style/mixin.rtl.less
@@ -0,0 +1,60 @@
+@import '../../style/mixins/index';
+
+.loop-grid-columns(@index, @class) when (@index > 0) {
+  .@{ant-prefix}-col@{class}-push-@{index} {
+    // reset property in RTL direction
+    &.@{ant-prefix}-col-rtl {
+      right: percentage((@index / @grid-columns));
+      left: auto;
+    }
+  }
+
+  .@{ant-prefix}-col@{class}-pull-@{index} {
+    // reset property in RTL direction
+    &.@{ant-prefix}-col-rtl {
+      right: auto;
+      left: percentage((@index / @grid-columns));
+    }
+  }
+
+  .@{ant-prefix}-col@{class}-offset-@{index} {
+    // reset property in RTL direction
+    &.@{ant-prefix}-col-rtl {
+      margin-right: percentage((@index / @grid-columns));
+      margin-left: 0;
+    }
+  }
+}
+
+.loop-grid-columns(@index, @class) when (@index = 0) {
+  .@{ant-prefix}-col-push-@{index} {
+    // reset property in RTL direction
+    &.@{ant-prefix}-col-rtl {
+      right: auto;
+    }
+  }
+
+  .@{ant-prefix}-col-pull-@{index} {
+    &.@{ant-prefix}-col-rtl {
+      left: auto;
+    }
+  }
+
+  .@{ant-prefix}-col@{class}-push-@{index} {
+    &.@{ant-prefix}-col-rtl {
+      right: auto;
+    }
+  }
+
+  .@{ant-prefix}-col@{class}-pull-@{index} {
+    &.@{ant-prefix}-col-rtl {
+      left: auto;
+    }
+  }
+
+  .@{ant-prefix}-col@{class}-offset-@{index} {
+    &.@{ant-prefix}-col-rtl {
+      margin-right: 0;
+    }
+  }
+}
diff --git a/components/grid/style/rtl.less b/components/grid/style/rtl.less
new file mode 100644
index 0000000000..d3efc70f2d
--- /dev/null
+++ b/components/grid/style/rtl.less
@@ -0,0 +1,14 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+
+.@{ant-prefix}-row {
+  &-rtl {
+    direction: rtl;
+  }
+}
+
+.@{ant-prefix}-col {
+  &&-rtl {
+    float: right;
+  }
+}
diff --git a/components/typography/style/index.less b/components/typography/style/index.less
index 3674954c15..0797738a03 100644
--- a/components/typography/style/index.less
+++ b/components/typography/style/index.less
@@ -1,5 +1,6 @@
 @import '../../style/themes/index';
 @import '../../style/mixins/index';
+@import './rtl';
 
 @typography-prefix-cls: ~'@{ant-prefix}-typography';
 
@@ -7,10 +8,6 @@
 .@{typography-prefix-cls} {
   color: @text-color;
 
-  &-rtl {
-    direction: rtl;
-  }
-
   &&-secondary {
     color: @text-color-secondary;
   }
@@ -132,11 +129,6 @@
     .operation-unit();
 
     margin-left: 8px;
-
-    .@{typography-prefix-cls}-rtl & {
-      margin-right: 8px;
-      margin-left: 0;
-    }
   }
 
   &-copy-success {
@@ -156,11 +148,6 @@
       margin-top: -@input-padding-vertical-base - 1px;
       // stylelint-disable-next-line function-calc-no-invalid
       margin-bottom: calc(1em - @input-padding-vertical-base - 2px);
-
-      &.@{typography-prefix-cls}-rtl {
-        right: -@input-padding-horizontal - 1px;
-        left: auto;
-      }
     }
 
     &-confirm {
@@ -169,11 +156,6 @@
       bottom: 8px;
       color: @text-color-secondary;
       pointer-events: none;
-
-      .@{typography-prefix-cls}-rtl & {
-        right: auto;
-        left: 10px;
-      }
     }
 
     // Fix Editable Textarea flash in Firefox
@@ -191,11 +173,6 @@
     li {
       margin: 0 0 0 20px;
       padding: 0 0 0 4px;
-
-      .@{typography-prefix-cls}-rtl& {
-        margin: 0 20px 0 0;
-        padding: 0 4px 0 0;
-      }
     }
   }
 
diff --git a/components/typography/style/rtl.less b/components/typography/style/rtl.less
new file mode 100644
index 0000000000..bec1c01858
--- /dev/null
+++ b/components/typography/style/rtl.less
@@ -0,0 +1,48 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+
+@typography-prefix-cls: ~'@{ant-prefix}-typography';
+
+.@{typography-prefix-cls} {
+  &-rtl {
+    direction: rtl;
+  }
+
+  // Operation
+  &-expand,
+  &-edit,
+  &-copy {
+    .@{typography-prefix-cls}-rtl & {
+      margin-right: 8px;
+      margin-left: 0;
+    }
+  }
+
+  // Text input area
+  &-edit-content {
+    div& {
+      &.@{typography-prefix-cls}-rtl {
+        right: -@input-padding-horizontal - 1px;
+        left: auto;
+      }
+    }
+
+    &-confirm {
+      .@{typography-prefix-cls}-rtl & {
+        right: auto;
+        left: 10px;
+      }
+    }
+  }
+
+  // list
+  ul,
+  ol {
+    li {
+      .@{typography-prefix-cls}-rtl& {
+        margin: 0 20px 0 0;
+        padding: 0 4px 0 0;
+      }
+    }
+  }
+}