diff --git a/components/app/__tests__/__snapshots__/index.test.tsx.snap b/components/app/__tests__/__snapshots__/index.test.tsx.snap
index 9d7d65275a..88a0ee254a 100644
--- a/components/app/__tests__/__snapshots__/index.test.tsx.snap
+++ b/components/app/__tests__/__snapshots__/index.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`App rtl render component should be rendered correctly in RTL direction 1`] = `
 <div
-  class="ant-app"
+  class="ant-app ant-app-rtl"
 />
 `;
 
diff --git a/components/app/index.tsx b/components/app/index.tsx
index b84ba221ee..4c74eec667 100644
--- a/components/app/index.tsx
+++ b/components/app/index.tsx
@@ -35,10 +35,13 @@ const App: React.FC<AppProps> & { useApp: () => useAppProps } = (props) => {
     style,
     component = 'div',
   } = props;
-  const { getPrefixCls } = useContext<ConfigConsumerProps>(ConfigContext);
+  const { direction, getPrefixCls } = useContext<ConfigConsumerProps>(ConfigContext);
   const prefixCls = getPrefixCls('app', customizePrefixCls);
   const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
-  const customClassName = classNames(hashId, prefixCls, className, rootClassName, cssVarCls);
+
+  const customClassName = classNames(hashId, prefixCls, className, rootClassName, cssVarCls, {
+    [`${prefixCls}-rtl`]: direction === 'rtl',
+  });
 
   const appConfig = useContext<AppConfig>(AppConfigContext);
 
@@ -74,6 +77,7 @@ const App: React.FC<AppProps> & { useApp: () => useAppProps } = (props) => {
 
   // ============================ Render ============================
   const Component = component === false ? React.Fragment : component;
+
   const rootProps: AppProps = {
     className: customClassName,
     style,
diff --git a/components/app/style/index.ts b/components/app/style/index.ts
index a2580d54df..bcb2bdc910 100644
--- a/components/app/style/index.ts
+++ b/components/app/style/index.ts
@@ -15,6 +15,9 @@ const genBaseStyle: GenerateStyle<AppToken> = (token) => {
       fontSize,
       lineHeight,
       fontFamily,
+      [`&${componentCls}-rtl`]: {
+        direction: 'rtl',
+      },
     },
   };
 };