Remix 集成 MUI

2024-05-13 14:52
文章标签 集成 mui remix

本文主要是介绍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);});
}

主要用了 ThemeProvider,有了 ThemeProvider,Theme的配置就可以传递到组件了。完整的项目,可以访问 git https://github.com/sjwan/remix-mui。

项目中用加了 meta theme-color,有了这个主题颜色,浏览器的整体颜色就会一起变化,IOS 15 以上的系统浏览器 Safari 支持这个效果,macos 并不支持。
在这里插入图片描述

这篇关于Remix 集成 MUI的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/986015

相关文章

SpringBoot集成LiteFlow实现轻量级工作流引擎的详细过程

《SpringBoot集成LiteFlow实现轻量级工作流引擎的详细过程》LiteFlow是一款专注于逻辑驱动流程编排的轻量级框架,它以组件化方式快速构建和执行业务流程,有效解耦复杂业务逻辑,下面给大... 目录一、基础概念1.1 组件(Component)1.2 规则(Rule)1.3 上下文(Conte

使用vscode搭建pywebview集成vue项目实践

《使用vscode搭建pywebview集成vue项目实践》:本文主要介绍使用vscode搭建pywebview集成vue项目实践,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地... 目录环境准备项目源码下载项目说明调试与生成可执行文件核心代码说明总结本节我们使用pythonpywebv

Maven项目中集成数据库文档生成工具的操作步骤

《Maven项目中集成数据库文档生成工具的操作步骤》在Maven项目中,可以通过集成数据库文档生成工具来自动生成数据库文档,本文为大家整理了使用screw-maven-plugin(推荐)的完... 目录1. 添加插件配置到 pom.XML2. 配置数据库信息3. 执行生成命令4. 高级配置选项5. 注意事

Java集成Onlyoffice的示例代码及场景分析

《Java集成Onlyoffice的示例代码及场景分析》:本文主要介绍Java集成Onlyoffice的示例代码及场景分析,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要... 需求场景:实现文档的在线编辑,团队协作总结:两个接口 + 前端页面 + 配置项接口1:一个接口,将o

Swagger2与Springdoc集成与使用详解

《Swagger2与Springdoc集成与使用详解》:本文主要介绍Swagger2与Springdoc集成与使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录1. 依赖配置2. 基础配置2.1 启用 Springdoc2.2 自定义 OpenAPI 信息3.

Spring Boot 集成 Solr 的详细示例

《SpringBoot集成Solr的详细示例》:本文主要介绍SpringBoot集成Solr的详细示例,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧... 目录环境准备添加依赖配置 Solr 连接定义实体类编写 Repository 接口创建 Service 与 Controller示例运行

Spring Boot集成SLF4j从基础到高级实践(最新推荐)

《SpringBoot集成SLF4j从基础到高级实践(最新推荐)》SLF4j(SimpleLoggingFacadeforJava)是一个日志门面(Facade),不是具体的日志实现,这篇文章主要介... 目录一、日志框架概述与SLF4j简介1.1 为什么需要日志框架1.2 主流日志框架对比1.3 SLF4

Spring Boot集成Logback终极指南之从基础到高级配置实战指南

《SpringBoot集成Logback终极指南之从基础到高级配置实战指南》Logback是一个可靠、通用且快速的Java日志框架,作为Log4j的继承者,由Log4j创始人设计,:本文主要介绍... 目录一、Logback简介与Spring Boot集成基础1.1 Logback是什么?1.2 Sprin

springboot集成Lucene的详细指南

《springboot集成Lucene的详细指南》这篇文章主要为大家详细介绍了springboot集成Lucene的详细指南,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以跟随小编一起... 目录添加依赖创建配置类创建实体类创建索引服务类创建搜索服务类创建控制器类使用示例以下是 Spring

Spring Boot 集成 Quartz并使用Cron 表达式实现定时任务

《SpringBoot集成Quartz并使用Cron表达式实现定时任务》本篇文章介绍了如何在SpringBoot中集成Quartz进行定时任务调度,并通过Cron表达式控制任务... 目录前言1. 添加 Quartz 依赖2. 创建 Quartz 任务3. 配置 Quartz 任务调度4. 启动 Sprin