如何在Preact中使用最新版MUI？preact-mui已失效

方案1：借助preact/compat兼容层适配MUI生态 #

Preact官方提供的preact/compat可以模拟React核心API，让绝大多数React生态的库能在Preact项目中正常运行，包括最新版的MUI系列组件库。

步骤：

1. 安装必要依赖：

   npm install @mui/base @mui/joy-ui preact/compat
   # 或使用yarn
   yarn add @mui/base @mui/joy-ui preact/compat
   

2. 为React相关包配置别名（以Vite为例，修改vite.config.js）：

   import { defineConfig } from 'vite'
   import preact from '@preact/preset-vite'
   
   export default defineConfig({
     plugins: [preact()],
     resolve: {
       alias: {
         'react': 'preact/compat',
         'react-dom': 'preact/compat'
       }
     }
   })
   

3. 直接引入MUI的非Material Design组件使用：

   import { Button } from '@mui/joy-ui';
   
   function App() {
     return <Button variant="solid">Joy UI 按钮</Button>;
   }
   

方案2：基于MUI Base定制全自定义组件 #

MUI Base是MUI推出的无样式基础组件库，你可以完全自主编写样式，彻底脱离Material Design的设计约束。

步骤：

1. 安装MUI Base和preact/compat：

   npm install @mui/base preact/compat
   

2. 配置React别名（同方案1）。
3. 引入基础组件并添加自定义样式：

   import { Button } from '@mui/base/Button';
   import './CustomButton.css';
   
   function App() {
     return <Button className="custom-button">自定义按钮</Button>;
   }
   

   对应的CustomButton.css示例：

   .custom-button {
     padding: 8px 16px;
     border: none;
     border-radius: 4px;
     background: #2563eb;
     color: white;
     cursor: pointer;
     transition: background 0.2s;
   }
   .custom-button:hover {
     background: #1d4ed8;
   }
   

方案3：使用Joy UI（MUI官方非Material Design组件库） #

Joy UI是MUI独立推出的组件库，采用现代简约设计语言，完全不遵循Material Design规范，配合preact/compat可直接在Preact中使用。

步骤：

1. 安装Joy UI和preact/compat：

   npm install @mui/joy-ui preact/compat
   

2. 配置React别名（同方案1）。
3. 引入Joy UI组件构建页面：

   import { Card, Typography, Button } from '@mui/joy-ui';
   
   function App() {
     return (
       <Card sx={{ padding: 2, maxWidth: 300 }}>
         <Typography level="h4">Joy UI 卡片</Typography>
         <Typography level="body1" sx={{ marginY: 1 }}>
           完全脱离Material Design的风格体验
         </Typography>
         <Button variant="outlined">查看详情</Button>
       </Card>
     );
   }
   

注意事项：

• 避免使用@mui/material（Material Design核心组件库），符合你拒绝Material Design的需求。
• 确保构建工具（Vite、Webpack等）的别名配置正确，否则会出现依赖冲突或运行错误。

内容的提问来源于stack exchange，提问作者Usman Tariq