javascript - gatsby-theme-material-ui 和 gatsby-plugin-material-ui 的区别

Question

我正在用 gatsby 设计一个网页，我想使用 Material UI，但我不知道该使用哪个插件。

我的问题是:

这两者之间有区别吗，我该如何实现它们才能有一个 Theme Customized ？

我应该把 theme.js 放在哪里以及在哪里放置 ThemeProvider包装？

如何配置项目？

Answer 1

这两个包都可以解决问题:将 Material UI 放入您的项目中。
区别在于 gatsby-theme-material-ui对于初学者来说更完整和用户友好。例如 plugin ，你必须确保你加载了roboto字体或MUI theme你自己。 theme为您设置 Material UI 所需的一切，您可以立即开始开发。
所有plugin这样做是为了确保将 Material UI 样式正确加载到您的项目中。这很重要，因为 Gatsby 如何使用服务器端渲染。这在开始时可能很难正确理解。但是您仍然需要按照 docs 中的说明设置字体和主题提供程序。 .
有技术comparison每个插件的作用:

Theme vs. Plugin

• gatsby-plugin-material-ui solves FOUC, auto prefixing and minification.
• gatsby-theme-material-ui uses the plugin under the hood, adds web fonts, meta-viewport, CSS baseline and mui theme support and has material ui styled gatsby link components

对于新用户，我会推荐 gatsby-theme-material-ui

how can I implement them in order to have a Theme Customized

关注 documentation .创建文件 src/gatsby-theme-material-ui-top-layout/theme.js并使用此文件自定义您的主题，如 MUI docs 中所述。 .

Where should I put the theme.js and where to put the ThemeProvider wrapper

关注 documentation .在 src/gatsby-theme-material-ui-top-layout/components/top-layout.js 中创建提供程序.

And also how to configure the project

关注 documentation .

// with npm
npm install gatsby-theme-material-ui @material-ui/core

// with yarn
yarn add gatsby-theme-material-ui @material-ui/core

编辑 gatsby-config.js

module.exports = {
  plugins: [
    // ... other plugins
    `gatsby-theme-material-ui`
  ],
};

您的 Gatsby 配置已完成。