Question

我在App.js中创建了一个主题，该主题覆盖了主色和辅助色。我有ThemeProvider包装一个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

Home.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道具等）。

这里是working example。

Material-UI ThemeProvider未将主题传递给组件

1 个答案: