MuiThemeProvider vs ThemeProvider
February 21, 2019 at 3:31pmThe Material-UI community has a new home. This thread is preserved for historical purposes. The content of this conversation may be innaccurrate or out of date. Go to new community home →
MuiThemeProvider vs ThemeProvider
February 21, 2019 at 3:31pmHello. I am a newbie for Material UI. I am wondering what is the best practice to use both theme providers. As I understand, I have to supply a theme to MuiThemeProvider to apply the theme to framework's components like Button, Card, etc. And I have to supply a theme to ThemeProvider in order to have it available when I create custom components
I am doing this in my project
const theme = createMuiTheme({typography: {useNextVariants: true}});ReactDOM.render(<MuiThemeProvider theme={theme}><ThemeProvider theme={theme}><App /></ThemeProvider></MuiThemeProvider>,document.getElementById('root'));
Is it correct to pass the same theme object to both providers?
July 1, 2019 at 9:27pm
June 16, 2020 at 7:53am
October 27, 2020 at 4:30am
I'm new to react but have been spending a lot of time learning about the theme features. Thought I'd provide a default example that works for me. Keep in mind, i'm in Typescript, so you'll see me augmenting the base "CommonColors" interface in order to accept new colors under
theme.palette.common
definition....(not necessary if you're using normal JS).Again, hope this helps someone...
App.tsx
Theme.ts
Example implementation