CODEWITHSUNDEEP
reactjsmaterial-ui
user3831527
user3831527

Reputation: 139

Material-UI ThemeProvider not passing theme to components

I've created a theme in my App.js which overrides the Primary and Secondary color. I have ThemeProvider wrapping a Home component. The overridden values are not showing up in the Home component. What am I doing wrong?

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.

Upvotes: 3

Views: 6967

Answers (1)

PasVV
PasVV

Reputation: 593

You've got some typo (like pallete instead of palette, redundant overrides prop etc).

Here a working example.

Upvotes: 6

Related Questions