нельзя использовать цвет темы по тегу muiThemeProvider в material-ui

Question

Я работаю над проектом приложения React-redux и плохо знаком с тематикой материалов. Я создал объект темы в отдельном файле темы. js, обозначенном следующим образом:

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

И я отобразил MuiThemeProvider на своем внешнем слое приложения в index. js:

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

Мой вопрос заключается в том, что мое приложение в настоящее время показывает правильный цвет фона, но я не знаю, как правильно использовать цвет, который я создал в своей палитре, в других частях моего приложения. Например, я попытался назначить основной синий цвет заголовку в приложении. js:

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

Но это не сработало. Все импортировано правильно. Нет ошибки. Цвет шрифта не изменился. Есть идеи?

Кстати, я видел урок с тегом ThemeProvider, в чем разница между ThemeProvider и MuiThemeProvider, который вы рекомендуете использовать в целом?

Answer 1

Ваша проблема, вероятно, отсутствует в тематике. Из документации Material-ui Содержимое карты не принимает параметр цвета

Содержимое карты

Я бы попробовал:

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