Remix 集成 MUI

Remix 如何接入 MUI 组件库，MUI 官网提供了一个 Remix 接入 MUI 的例子，用的是老的 Remix版本，如何接入新的 Vite 版本呢？

由于 MUI 支持 SSR，只需要改造对应的 Client 和 Server 即可实现。安装 MUI 组件组件库，修改对应的 Client/Server 文件，代码如下：

安装 MUI

npm install @mui/material @emotion/react @emotion/styled @mui/icons-material

创建 MUI Provider

import { CacheProvider } from "@emotion/react";import { ThemeProvider } from "@mui/material";
import theme from "./theme";
import createCache from "@emotion/cache";function createEmotionCache() {return createCache({ key: "css" });
}export function MuiProvider({ children }: { children: React.ReactNode }) {const cache = createEmotionCache();return (<CacheProvider value={cache}><ThemeProvider theme={theme}>{children}</ThemeProvider></CacheProvider>);
}

修改 client、server

### entry.client.tsx
/*** By default, Remix will handle hydrating your app on the client for you.* You are free to delete this file if you'd like to, but if you ever want it revealed again, you can run `npx remix reveal` ✨* For more information, see https://remix.run/file-conventions/entry.client*/import { RemixBrowser } from "@remix-run/react";
import { startTransition, StrictMode } from "react";
import { hydrateRoot } from "react-dom/client";
import { MuiProvider } from "./mui/MuiProvider";startTransition(() => {hydrateRoot(document,<StrictMode><MuiProvider><RemixBrowser /></MuiProvider></StrictMode>);
});

### entry.server.tsx
/*** By default, Remix will handle generating the HTTP Response for you.* You are free to delete this file if you'd like to, but if you ever want it revealed again, you can run `npx remix reveal` ✨* For more information, see https://remix.run/file-conventions/entry.server*/import { PassThrough } from "node:stream";import type { AppLoadContext, EntryContext } from "@remix-run/node";
import { createReadableStreamFromReadable } from "@remix-run/node";
import { RemixServer } from "@remix-run/react";
import { isbot } from "isbot";
import { renderToPipeableStream } from "react-dom/server";
import { MuiProvider } from "./mui/MuiProvider";const ABORT_DELAY = 5_000;export default function handleRequest(request: Request,responseStatusCode: number,responseHeaders: Headers,remixContext: EntryContext,// This is ignored so we can keep it in the template for visibility.  Feel// free to delete this parameter in your app if you're not using it!// eslint-disable-next-line @typescript-eslint/no-unused-varsloadContext: AppLoadContext
) {return isbot(request.headers.get("user-agent") || "")? handleBotRequest(request,responseStatusCode,responseHeaders,remixContext): handleBrowserRequest(request,responseStatusCode,responseHeaders,remixContext);
}function handleBotRequest(request: Request,responseStatusCode: number,responseHeaders: Headers,remixContext: EntryContext
) {return new Promise((resolve, reject) => {let shellRendered = false;const { pipe, abort } = renderToPipeableStream(<RemixServercontext={remixContext}url={request.url}abortDelay={ABORT_DELAY}/>,{onAllReady() {shellRendered = true;const body = new PassThrough();const stream = createReadableStreamFromReadable(body);responseHeaders.set("Content-Type", "text/html");resolve(new Response(stream, {headers: responseHeaders,status: responseStatusCode,}));pipe(body);},onShellError(error: unknown) {reject(error);},onError(error: unknown) {responseStatusCode = 500;// Log streaming rendering errors from inside the shell.  Don't log// errors encountered during initial shell rendering since they'll// reject and get logged in handleDocumentRequest.if (shellRendered) {console.error(error);}},});setTimeout(abort, ABORT_DELAY);});
}function handleBrowserRequest(request: Request,responseStatusCode: number,responseHeaders: Headers,remixContext: EntryContext
) {return new Promise((resolve, reject) => {let shellRendered = false;const { pipe, abort } = renderToPipeableStream(<MuiProvider><RemixServercontext={remixContext}url={request.url}abortDelay={ABORT_DELAY}/></MuiProvider>,{onShellReady() {shellRendered = true;const body = new PassThrough();const stream = createReadableStreamFromReadable(body);responseHeaders.set("Content-Type", "text/html");resolve(new Response(stream, {headers: responseHeaders,status: responseStatusCode,}));pipe(body);},onShellError(error: unknown) {reject(error);},onError(error: unknown) {responseStatusCode = 500;// Log streaming rendering errors from inside the shell.  Don't log// errors encountered during initial shell rendering since they'll// reject and get logged in handleDocumentRequest.if (shellRendered) {console.error(error);}},});setTimeout(abort, ABORT_DELAY);});
}