如何在 Gantine 项目中安装 Mantine 并完成 PostCSS 配置【免费下载链接】mantineA fully featured React components library项目地址: https://gitcode.com/GitHub_Trending/ma/mantine在 Gatsby 项目中接入 Mantine 组件库时需要完成三件事安装 Mantine 包、安装并配置 PostCSS 插件postcss-preset-mantine、把MantineProvider挂到页面渲染链路上。本文基于仓库中的 Gatsby 官方指南 和 PostCSS preset 文档按顺序给出可执行的完整步骤。适用前提使用 Gatsby 创建 React 项目并在项目初始化时选择 PostCSS 作为样式系统。准备条件创建 Gatsby 应用并选择 PostCSS按 Gatsby quick start 的思路新建一个应用# 使用 npm npm init gatsby # 或使用 yarn yarn create gatsby创建过程中会询问 Would you like to install a styling system?此处必须选择PostCSS。这个选择决定了后续 Mantine 的 PostCSS 插件能够生效——Mantine 的样式依赖 PostCSS 处理Gatsby 默认的样式方案不适用。安装 Mantine 包Gatsby 指南中的安装步骤对应文档里的PackagesInstallation宏默认安装mantine/core和mantine/hooks两个包其余 Mantine 扩展包按需自行勾选安装# 使用 npm npm install mantine/core mantine/hooks # 或使用 yarn yarn add mantine/core mantine/hooks注意除mantine/hooks之外的 Mantine 包都需要导入样式见下文gatsby-browser.tsx中的说明因此如果你后续安装了mantine/dates等扩展包记得在浏览器端入口中补充对应的styles.css导入。安装并配置 PostCSS 插件这一步对应 PostCSS preset 文档postcss-preset-mantine本身不是必须的但文档建议安装它且仓库中所有带自定义样式的 demo 都默认该 preset 已安装。安装 dev 依赖Gatsby 指南将 PostCSS 相关包作为 dev 依赖安装# 使用 npm npm install --save-dev postcss postcss-preset-mantine postcss-simple-vars # 或使用 yarn yarn add --dev postcss postcss-preset-mantine postcss-simple-vars创建 postcss.config.cjs在应用根目录创建postcss.config.cjs内容如下breakpoint 变量由postcss-simple-vars提供供样式中的响应式断点使用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, }, }, }, };配置完成后preset 提供的能力即可在.css文件中直接使用包括rem/em函数把像素值转换为 rem/em 单位16px 1remem值用于 media query其余位置用remautoRem: true选项自动把.css文件中的像素值转换为 rem但media查询中的值、calc()/var()/clamp()/url()内的值、content属性、含rgb()/hsl()等颜色的值不会被转换需要时手动使用rem函数light/dark混入按data-mantine-color-scheme生成只在深色或浅色方案下生效的样式smaller-than/larger-than混入按断点生成媒体查询断点值会被转换为 em 单位且smaller-than会从断点值中减去 0.1px 以避免与larger-than区间重叠hover、rtl/ltr、not-rtl/not-ltr混入以及alpha/lighten/darken函数依赖color-mix部分旧浏览器不支持。这些能力是可选的但样式示例和断点变量都建立在此配置之上所以 Gatsby 指南把该配置作为标准步骤。接入主题与 MantineProviderPostCSS 配置完成后还需要让 React 端提供主题。按指南依次创建三个文件。创建 src/theme.ts// src/theme.ts import { createTheme } from mantine/core; export const theme createTheme({ fontFamily: serif, // ... other theme override properties });其中fontFamily: serif只是文档示例中的主题覆盖写法按需替换为你自己的主题属性。创建 gatsby-ssr.tsx该文件用于服务端渲染阶段把ColorSchemeScript注入到 head并把MantineProvider包到页面上import { ColorSchemeScript, MantineProvider } from mantine/core; import { theme } from ./src/theme; export const onPreRenderHTML ({ getHeadComponents, replaceHeadComponents, }) { const headComponents getHeadComponents(); replaceHeadComponents([ ...headComponents, ColorSchemeScript keycolor-scheme-script /, ]); }; export const wrapPageElement ({ element }) { return MantineProvider theme{theme}{element}/MantineProvider; };创建 gatsby-browser.tsx浏览器端入口负责导入样式并再次包一层MantineProvider// Import styles of packages that youve installed. // All packages except mantine/hooks require styles imports import mantine/core/styles.css; import { MantineProvider } from mantine/core; import { theme } from ./src/theme; export const wrapPageElement ({ element }) { return MantineProvider theme{theme}{element}/MantineProvider; };两个文件都导出wrapPageElement是 Gatsby 的约定SSR 与浏览器端各包一次MantineProvider保证服务端与客户端渲染一致。验证启动开发服务器三个文件就位后启动开发服务器确认整个链路工作npm run develop页面正常渲染出 Mantine 组件样式、深色/浅色方案均生效即说明安装与 PostCSS 配置完成。若自定义样式中使用了rem()、mixin dark等 preset 语法但没有被转换通常意味着postcss.config.cjs未放在项目根目录或其中缺少postcss-preset-mantine条目。Gatsby 特有的限制CSS Modules 导入语法在 Gatsby 中CSS Modules 的导入语法与默认不同直接照抄 Mantine demo 会失败// Default syntax – will not work in Gatsby import classes from ./Demo.module.css; // Gatsby syntax import * as classes from ./Demo.module.css;如果你从仓库其他框架的 demo 中复制了 CSS Modules 组件需要按上面第二行语法改写导入语句。参考Gatsby 使用指南本文步骤的直接来源包含 PostCSS 配置、主题文件、gatsby-ssr.tsx与gatsby-browser.tsx的完整内容。Mantine PostCSS presetpostcss-preset-mantine提供的函数、混入与autoRem选项的完整说明。【免费下载链接】mantineA fully featured React components library项目地址: https://gitcode.com/GitHub_Trending/ma/mantine创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考