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

Question

我正在开发一个 React-redux 应用项目，而且我是 material-ui 主题的新手。我在单独的 theme.js 文件中创建了一个主题对象，概述如下：

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

我在 index.js 的应用程序外层渲染了MuiThemeProvider：

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

我的问题是，我的应用当前显示正确的背景颜色，但我不知道如何在应用的其他部分正确使用我在调色板中创建的颜色。例如，我尝试将原色蓝色分配给 App.js 中的标题：

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

但它没有用。一切都正确导入。没有错误。字体颜色没有改变。有什么想法吗？

顺便说一下，我看过使用ThemeProvider标签的教程，ThemeProvider和MuiThemeProvider有什么区别，你一般推荐使用哪一个？

Answer 1

您的问题可能不在主题中，来自 Material-ui 文档 Card Content 不接受颜色参数

Card Content

我会尝试：

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