mantine-ui

Mantine UI

仅适用于 React 的组件库（120+ 个组件、70+ 个钩子）。适用于表单、覆盖层、日期、图表、通知和主题设置。文档：mantine.dev。预构建示例：ui.mantine.dev。

快速设置（新建或现有应用）

1. 安装核心软件包

   • 必需：@mantine/core 和 @mantine/hooks
   • 按功能选装：@mantine/form、@mantine/dates、@mantine/notifications 等（参见 reference.md）

2. PostCSS（Mantine 样式所必需）

   • 安装：postcss、postcss-preset-mantine、postcss-simple-vars（作为 devDependencies）
   • 在项目根目录添加 postcss.config.cjs：

   module.exports = {
     plugins: {
       'postcss-preset-mantine': {},
       'postcss-simple-vars': {
         variables: {
           'mantine-breakpoint-xs': '36em',
           'mantine-breakpoint-sm': '48em',
           'mantine-breakpoint-md': '62em',
           'mantine-breakpoint-lg': '75em',
           'mantine-breakpoint-xl': '88em',
         },
       },
     },
   };
   

3. 导入样式一次（例如在 _app.tsx、main.tsx 或根布局中）

   import '@mantine/core/styles.css';
   // Add per-package only if used: '@mantine/dates/styles.css', etc.
   

4. 使用 MantineProvider 包装应用

   import { createTheme, MantineProvider } from '@mantine/core';
   
   const theme = createTheme({ /* optional overrides */ });
   
   export default function App() {
     return (
       <MantineProvider theme={theme}>
         {/* app */}
       </MantineProvider>
     );
   }
   

5. SSR（Next.js app router 等）——避免水合闪烁：在 <head> 中添加 ColorSchemeScript，并将 mantineHtmlProps 展开到 <html> 上：

   import { ColorSchemeScript, mantineHtmlProps } from '@mantine/core';
   
   <html lang="en" {...mantineHtmlProps}>
     <head>
       <ColorSchemeScript />
       {/* ... */}
     </head>
     <body>...</body>
   </html>
   

约定

• 在根节点使用单个 MantineProvider；除非要有意覆盖主题，否则不要嵌套另一个 MantineProvider。
• 组件样式：优先使用主题/设置（例如 createTheme、组件属性）。使用 Styles API 定位内部部分；使用响应式样式设置断点。
• 多态组件：许多组件可通过属性指定根元素（例如 component、renderRoot）——参见多态组件。
• 表单：将 @mantine/form 与 Mantine 输入组件搭配使用，以实现验证和状态管理；参见表单文档。
• 额外软件包：只安装需要的软件包；每个软件包可能都需要单独导入 CSS（例如 @mantine/dates/styles.css）。

框架说明

• Next.js：优先参阅 Next.js 指南（app 或 pages router）。从头开始时，可使用入门指南中的模板。
• Vite：参见 Vite 指南。新项目不要使用 Create React App；Mantine 推荐使用 Vite 或 Next.js。

如有疑问

• 查看 mantine.dev 上对应组件的页面（例如 Button、TextInput、Modal）。
• 完整示例和可直接复制的代码片段：ui.mantine.dev。
• 软件包列表和 CSS 导入方式：reference.md。