reactjs - 无法通过 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;

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

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

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

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

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

顺便说一句，我看过使用标签的教程，和ThemeProvider之间有什么区别，您一般推荐使用哪一个？ThemeProviderMuiThemeProvider

标签： reactjsmaterial-ui

Answer 1

您的问题可能不在主题中，来自 Material-ui 文档 Card Content does not accept the color 参数

卡片内容

我会尝试 ：

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