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

Question

我在我的 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.

Answer 1

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

这里是working example .