如何在纯 JavaScript 项目中使用 Mantine 组件【免费下载链接】mantineA fully featured React components library项目地址: https://gitcode.com/GitHub_Trending/ma/mantine如果你的项目没有使用 TypeScript比如用 Vite 的 JavaScript 模板创建的应用又想引入 Mantine 组件库官方文档给出的结论是明确的所有mantine/*包都可以在 JavaScript 项目中使用这些包虽然是用 TypeScript 编写的但自带类型定义因此在 JavaScript 项目里依然能获得 IDE 自动补全等体验见 Usage with JavaScript。这篇文章以 Vite JavaScript 为例走一遍从安装、PostCSS 配置到组件可用的完整路径。创建 Vite JavaScript 应用并安装 Mantine按 Usage with Vite 指南先用 Vite 官方脚手架创建应用选择 JavaScript 模板npm create vitelatest然后安装 Mantine 基础依赖。mantine/core的依赖包含mantine/hooks两者需要一起安装# With yarn yarn add mantine/core mantine/hooks # With npm npm install mantine/core mantine/hooks以上安装命令与 packages/mantine/core/README.md 中给出的完全一致。如果后续还需要mantine/form、mantine/dates等其他包按照对应包的文档安装即可模板默认只包含mantine/core和mantine/hooks见 Getting started。配置 PostCSSMantine 依赖 PostCSS 插件处理样式需要以开发依赖安装postcss、postcss-preset-mantine和postcss-simple-vars# With yarn yarn add --dev postcss postcss-preset-mantine postcss-simple-vars # With npm npm install --save-dev postcss postcss-preset-mantine postcss-simple-vars在项目根目录创建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, }, }, }, };一个边界情况如果你的项目使用的框架不在官方支持范围内例如用 Webpack 自管构建可能需要手动配置 PostCSS——比如 Webpack 场景需要额外安装并配置postcss-loader具体做法参见所用框架的文档Getting started 中的说明。在应用入口导入样式并挂载 MantineProvider修改应用根组件Vite 项目中通常是App.jsxTypeScript 模板中为App.tsx做两件事导入包对应的样式并用MantineProvider包裹应用// 导入已安装包对应的样式 // 除 mantine/hooks 外的所有包都需要导入样式 import mantine/core/styles.css; import { MantineProvider } from mantine/core; export default function App() { return MantineProvider{/* Your app here */}/MantineProvider; }如果之后安装了其他包如mantine/dates、mantine/dropzone、mantine/code-highlight还需要在根文件中补充导入它们各自的styles.css。如果你的应用使用了服务端渲染SSR文档要求额外在head /中加入ColorSchemeScript并在html /上展开mantineHtmlProps以避免水合hydration警告import { ColorSchemeScript, mantineHtmlProps } from mantine/core; html langen {...mantineHtmlProps} head meta charSetUTF-8 / meta nameviewport contentwidthdevice-width, initial-scale1.0 / titleMy awesome app/title ColorSchemeScript / /head body{/* Your app here */}/body /html纯客户端应用可以忽略这一段。启动并验证启动开发服务器npm run dev开发服务器正常启动、页面中出现你渲染的 Mantine 组件按钮、输入框等并且样式生效组件不是无样式的原生标签就说明安装与 PostCSS 配置都正确了。文档对这一步的表述是 All set! You can now use Mantine components in your application。如果组件渲染出来但没有样式优先检查两点postcss.config.cjs是否与上面的配置一致、入口文件是否导入了mantine/core/styles.css。把文档中的 TypeScript 示例改写成 JavaScriptMantine 官方文档中的所有示例代码都是用 TypeScript 写的。多数情况下 TypeScript 和 JavaScript 代码没有区别直接照抄即可需要改动类型时文档给出的做法是把示例代码粘贴到 TypeScript PlaygroundTypeScript 官方在线工具粘贴后所有类型标注会被自动移除同时记得手动删除类型相关的 import。文档中给出的转换示例// TypeScript code import { Button, ButtonProps } from mantine/core; interface MyButtonProps extends ButtonProps { myProp: string; } function MyButton({ myProp, ...others }: MyButtonProps) { return Button {...others} /; }转换后的 JavaScript 版本// JavaScript code import { Button } from mantine/core; function MyButton({ myProp, ...others }) { return Button {...others} /; }可以看到改动只有两处去掉了ButtonProps的类型导入和interface声明函数参数去掉了类型标注。按同样的方式处理其余示例即可。官方立场与限制需要说明的是官方推荐在 JavaScript 项目中也尽量配合 TypeScript 使用 Mantine传入不存在的 props、或升级到新版本时 props/组件被移除重命名TypeScript 都会直接给出类型错误能显著降低维护成本。用 JavaScript 没有任何功能上的限制只是放弃了这层静态检查。另外Getting started 提到 Create React App 已于 2023 年初被官方弃用不建议新项目继续使用官方建议改用 Vite 或 Next.js从 7.0 版本开始部分 Mantine 样式功能也不再官方支持 Create React App。如果你的纯 JavaScript 项目恰好建在 CRA 上这一点需要留意。【免费下载链接】mantineA fully featured React components library项目地址: https://gitcode.com/GitHub_Trending/ma/mantine创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考