我正在使用 Gatsby 设计一个网页,并希望使用 Material UI,但我不知道该用哪个插件。
我的问题是:
我的问题是:
- 这两者有何区别?如何实现主题自定义?
theme.js
应该放在哪里?ThemeProvider
包装器应该放在哪里?- 如何配置项目?
theme.js
应该放在哪里?ThemeProvider
包装器应该放在哪里?gatsby-theme-material-ui
对于初学者来说更加完整和用户友好。例如,使用plugin
时,您必须确保自己加载Roboto字体或MUI theme
。而theme
会为您设置Material UI所需的一切,您可以立即开始开发。
plugin
所做的所有事情就是确保Material UI样式正确地加载到您的项目中。这很重要,因为Gatsby如何与服务器端渲染一起工作。当您刚开始时,这可能很棘手并且难以理解。但是您仍然需要像docs中所解释的那样设置字体和主题提供程序。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中所述自定义主题。
请遵循documentation。在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: [
// ... other plugins
`gatsby-theme-material-ui`
],
};
您的 Gatsby 配置已完成。