cannot use theme color by muiThemeProvider tag in material-ui

Question

I'm working on a React-redux app project and I'm new to material-ui theming. I created a theme object in a separate theme.js file, outlined as follows:

const theme = createMuiTheme({
    palette: {
        primary: blue,
        error: {
            main: red[300],
        },
        background: {
            default: indigo[50],
        },
    }
})
export default theme;

And I rendered MuiThemeProvider in my outer layer of the app in index.js:

ReactDOM.render(
    <Provider store={store}>
        <MuiThemeProvider theme={theme}>
            <App />
        </MuiThemeProvider>
    </Provider>,
    document.getElementById("root")
);

My question is that, my app's currently showing the correct background color but I don't know how to properly use the color I created in my palette in other parts of my app. For example, I tried to assign the primary color blue to a title in App.js:

 <CardContent color="primary">
       TITLE
 </CardContent>

But it didn't work. Everything's imported properly. No error. The font color isn't changed. Any idea?

By the way, I've seen tutorial using ThemeProvider tag, what's the difference between ThemeProvider and MuiThemeProvider, which one do you recommend using in general?

My answer was not good, you can use the full blue color object... — Charles dB
@ Charles dB I tried using primary the other way but still didn't work... :/ I don't think that's where the issue is. — Young

Charles dB Charles dB · Accepted Answer · 2020-04-09T08:00:33

Your problem is not in the theming probably, From Material-ui documentation Card Content doesn't accept the color parameter

Card Content

I would try :

<CardContent>
    <Typography color="primary">
        Hello world
    </Typography>
</CardContent>

cannot use theme color by muiThemeProvider tag in material-ui

1 Answers