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

Question

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

我的问题是。

• 这两个插件之间有什么区别吗，我如何实现它们以实现主题定制？
• 我应该把 theme.js 以及在哪里放置 ThemeProvider 包装器？
• 如何配置项目？

Answer 1

这两个包都可以做。让Material UI进入你的项目

不同的是，gatsby-theme-material-ui为你做了更多的事情，而你必须用gatsby-plugin-material-ui手动完成。例如，使用插件，你必须确保你自己加载roboto字体或MUI主题。主题会自动做到这一点。对于新用户，我建议使用gatsby-theme-material-ui。

我如何实现他们为了有一个自定义的主题

遵循 文件. 创建文件 src/gatsby-theme-material-ui-top-layout/theme.js 并使用该文件来定制你的主题，如在 MUI文档.

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

遵循 文件. 创建一个供应商 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: [`gatsby-theme-material-ui`],
};

你的Gatsby配置已经完成。