无法通过 material-ui 中的 muiThemeProvider 标签使用主题颜色

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?

Answer 1

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>