gpt4 book ai didi

reactjs - Material-UI ThemeProvider 没有将主题传递给组件

转载 作者:行者123 更新时间:2023-12-04 02:33:50 26 4
gpt4 key购买 nike

我在我的 App.js 中创建了一个主题,它覆盖了主要颜色和次要颜色。我有 ThemeProvider 包装 Home 组件。覆盖的值未显示在 Home 组件中。我做错了什么?

App.js

import React from 'react'
import { ThemeProvider, createMuiTheme } from '@material-ui/core/styles'

import purple from '@material-ui/core/colors/purple'
import green from '@material-ui/core/colors/green'

import Home from './components/Home'

const theme = createMuiTheme({
overrides: {
pallete: {
primary: {
main: purple[500]
},
secondary: {
main: green[500]
}
}
}
})


const App = () => {
return (
<ThemeProvider theme={theme}>
<Home />
</ThemeProvider>
)
}
export default App

首页.js

import React from 'react'
import { useTheme } from '@material-ui/core/styles'
import { Container, Grid, AppBar, Toolbar, CssBaseline } from '@material-ui/core'

const Home = () => {
const theme = useTheme()

return (
<Container max="lg">
<CssBaseline />
<Grid container>
<Grid item xs={12}>
<AppBar color="primary">
<Toolbar>
Hello World
</Toolbar>
</AppBar>
</Grid>
</Grid >
</Container >
)
}
export default Home

I would think that in my AppBar the color="primary" should show up with the overridden primary color. But it's not happening.

最佳答案

你有一些拼写错误(比如 pallete 而不是 palette,冗余的 overrides prop 等)。

这里是working example .

关于reactjs - Material-UI ThemeProvider 没有将主题传递给组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62725780/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com