gatsby-theme-material-ui和gatsby-plugin-material-ui之间的区别

Question

我正在使用 Gatsby 设计一个网页，并希望使用 Material UI，但我不知道该用哪个插件。

我的问题是：

• 这两者有何区别？如何实现主题自定义？
• theme.js 应该放在哪里？ThemeProvider 包装器应该放在哪里？
• 如何配置项目？

- Andres Xavier Vargas Vera

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 解决了FOUC、自动前缀和缩小。
• gatsby-theme-material-ui 在插件下使用，添加了Web字体、meta-viewport、CSS基线和mui主题支持，并具有Material UI样式的gatsby链接组件。

对于新用户，我建议使用gatsby-theme-material-ui

如何实现它们以获得定制的主题

请遵循documentation。创建文件src/gatsby-theme-material-ui-top-layout/theme.js并使用此文件按照MUI docs中所述自定义主题。

theme.js应该放在哪里，ThemeProvider包装器应该放在哪里

请遵循documentation。在src/gatsby-theme-material-ui-top-layout/components/top-layout.js中创建提供程序。

还有如何配置项目

请遵循文档。

// 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 配置已完成。

- EliteRaceElephant

---

非常感谢@EliteRaceElephant，那真的很有帮助！！！顺便说一下，我在这里提问还是新手，如果犯了错误请见谅。 如需了解如何对文件夹和文件进行排序，请参阅此存储库链接。如果您遇到问题，请确保您的项目与此示例完全相同。 - Andres Xavier Vargas Vera