CODEWITHSUNDEEP
reactjsmaterial-ui
Young
Young

Reputation: 757

cannot use theme color by muiThemeProvider tag in material-ui

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?

Upvotes: 0

Views: 228

Answers (1)

Charles dB
Charles dB

Reputation: 705

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>

Upvotes: 1

Related Questions