diff --git a/apps/router-demo/router-host-2000/src/App.css b/apps/router-demo/router-host-2000/src/App.css
index cfa2d1a77d9..68459a1e823 100644
--- a/apps/router-demo/router-host-2000/src/App.css
+++ b/apps/router-demo/router-host-2000/src/App.css
@@ -1,3 +1,3 @@
 .remote1 {
-  background: pink;
+  background: green;
 }
diff --git a/apps/router-demo/router-host-2000/src/App.tsx b/apps/router-demo/router-host-2000/src/App.tsx
index 78e8f4e1037..921bbc42d58 100644
--- a/apps/router-demo/router-host-2000/src/App.tsx
+++ b/apps/router-demo/router-host-2000/src/App.tsx
@@ -6,6 +6,7 @@ import Navigation from './navigation';
 import Detail from './pages/Detail';
 import Home from './pages/Home';
 import './App.css';
+import styles from './index.module.less';
 
 const FallbackErrorComp = (info: any) => {
   return (
@@ -83,8 +84,8 @@ const App = () => {
       <Routes>
         <Route path="/" Component={Home} />
         <Route path="/detail/*" Component={Detail} />
-        <Route path="/remote1/*" Component={() => <Remote1App className="remote1" msg={'hello remote1'} ref={ref} />} />
-        <Route path="/remote2/*" Component={() => <Remote2App style={{ background: '#d4e8fa' }} msg={'hello remote2'} />} />
+        <Route path="/remote1/*" Component={() => <Remote1App className={styles.remote1} props={{ msg: 'hello remote1' }} ref={ref} />} />
+        <Route path="/remote2/*" Component={() => <Remote2App style={{ background: 'black' }} props={{ msg: 'hello remote2' }} />} />
         <Route path="/remote3/*" Component={() => <Remote3App />} />
         <Route path="/memory-router/*" Component={() => <Wraper3 />} />
       </Routes>
diff --git a/apps/router-demo/router-host-2000/src/index.module.less b/apps/router-demo/router-host-2000/src/index.module.less
new file mode 100644
index 00000000000..226eb907725
--- /dev/null
+++ b/apps/router-demo/router-host-2000/src/index.module.less
@@ -0,0 +1,4 @@
+.remote1 {
+    background: pink;
+}
+  
\ No newline at end of file
diff --git a/packages/bridge/bridge-react/src/create.tsx b/packages/bridge/bridge-react/src/create.tsx
index 3472dcd2da1..0b0f773fd88 100644
--- a/packages/bridge/bridge-react/src/create.tsx
+++ b/packages/bridge/bridge-react/src/create.tsx
@@ -7,6 +7,7 @@ import {
   ErrorBoundaryPropsWithComponent,
 } from 'react-error-boundary';
 import RemoteApp from './remote';
+
 export interface RenderFnParams extends ProviderParams {
   dom?: any;
 }
@@ -84,18 +85,12 @@ function createLazyRemoteComponent<T, E extends keyof T>(info: {
   });
 }
 
-type RemoteProps = {
-  basename?: ProviderParams['basename'];
-  memoryRoute?: ProviderParams['memoryRoute'];
-  [key: string]: any;
-};
-
 export function createRemoteComponent<T, E extends keyof T>(info: {
   loader: () => Promise<T>;
   loading: React.ReactNode;
   fallback: ErrorBoundaryPropsWithComponent['FallbackComponent'];
   export?: E;
-}): ForwardRefExoticComponent< PropsWithoutRef<RemoteProps> & RefAttributes<HTMLElement | HTMLDivElement>> {
+}): ForwardRefExoticComponent<PropsWithoutRef<ProviderParams> & RefAttributes<HTMLElement | HTMLDivElement>> {
   // type ExportType = T[E] extends (...args: any) => any
   //   ? ReturnType<T[E]>
   //   : never;
diff --git a/packages/bridge/bridge-react/src/remote/index.tsx b/packages/bridge/bridge-react/src/remote/index.tsx
index b0a16c4a429..61424fb5fc7 100644
--- a/packages/bridge/bridge-react/src/remote/index.tsx
+++ b/packages/bridge/bridge-react/src/remote/index.tsx
@@ -5,7 +5,6 @@ import { LoggerInstance, pathJoin } from '../utils';
 import { dispatchPopstateEnv } from '@module-federation/bridge-shared';
 
 declare const __APP_VERSION__: string;
-
 export interface RenderFnParams extends ProviderParams {
   dom?: any;
 }
@@ -34,8 +33,6 @@ const RemoteAppWrapper = forwardRef(function (props: RemoteAppParams & ProviderP
       memoryRoute,
       basename,
       providerInfo,
-      className,
-      style,
       ...resProps
     } = props;
 
@@ -80,7 +77,7 @@ const RemoteAppWrapper = forwardRef(function (props: RemoteAppParams & ProviderP
     }, []);
   
     //@ts-ignore
-    return <div className={className} style={style} ref={rootRef}></div>;
+    return <div className={props?.className} style={props?.style} ref={rootRef}></div>;
   }
 
   (RemoteApp as any)['__APP_VERSION__'] = __APP_VERSION__;
diff --git a/packages/bridge/bridge-shared/src/type.ts b/packages/bridge/bridge-shared/src/type.ts
index 600f9d5e294..d0a993d3eaf 100644
--- a/packages/bridge/bridge-shared/src/type.ts
+++ b/packages/bridge/bridge-shared/src/type.ts
@@ -1,10 +1,11 @@
-import { CSSProperties } from 'react';
-export interface ProviderParams {
+import React from 'react';
+export interface ProviderParams extends React.HTMLAttributes<HTMLDivElement> {
   name?: string;
   basename?: string;
   memoryRoute?: { entryPath: string };
-  style?: CSSProperties;
-  className?: string | string[];
+  props?: {
+    [key: string]: any;
+  }
 }
 
 export interface RenderFnParams extends ProviderParams {