我似乎无法让主题文件对Gatsby应用程序中的组件产生任何影响。我正在使用gatsby-plugin-material-ui
gatsby-config.js
`gatsby-plugin-netlify-cms`,
{
resolve: `gatsby-plugin-material-ui`,
options: {
pathToTheme: 'src/theme.js',
},
theme.js
import { createMuiTheme } from '@material-ui/core/styles';
import indigo from '@material-ui/core/colors/indigo';
import pink from '@material-ui/core/colors/pink';
import red from '@material-ui/core/colors/red';
const theme = createMuiTheme({
palette: {
primary: indigo,
secondary: pink,
error: red,
},
spacing: {
100
}
})
export default theme;
在组件内:
imports...
import { withStyles } from '@material-ui/core/styles';
const styles = theme => ({
heroText: {
color:'white',
textAlign: 'center',
lineHeight:7
},
mainBlogCopy: {
marginTop: theme.spacing.unit,
backgroundColor:theme.palette.primary
},
});
export default withStyles(styles)(AboutPage);
package.json
"dependencies": {
"@material-ui/core": "^3.9.3",
"gatsby": "^2.3.24",
"gatsby-image": "^2.0.34",
"gatsby-plugin-manifest": "^2.0.24",
"gatsby-plugin-material-ui": "^1.2.4",
更多...
该插件如何在另一个文件中使用主题?
答案 0 :(得分:1)
该插件似乎尚不支持theme
。在使用稳定版(@material/styles
)时,它也使用材料ui样式(@material/core/styles
)的alpha版本。
因此,无论哪种方式,您都必须自己实现主题功能。如果您选择坚持使用v3,这可能会有所帮助:
在您的根目录中创建一个名为mui-root-wrapper.js
的文件
// mui-root-wrapper.js
import React from 'react'
import { MuiThemeProvider } from '@material-ui/core/styles'
import theme from 'src/theme.js'
export default ({ element }) => (
<MuiThemeProvider theme={theme}>
{element}
</MuiThemeProvider>
)
然后将此组件导入到gatsby-browser.js
和gatsby-ssr.js
中:
// gatsby-browser.js, gatsby-ssr.js
import muiRootWrapper from "./mui-root-wrapper"
export const wrapRootElement = MUIWrapper
希望这足以使您前进。如果选择迁移到mui v4,则必须做类似的事情,但是要导入
import { ThemeProvider } from '@material-ui/styles';