如何为 React Material UI 实现全局主题？

Question

我想更改特定的材料组件样式，例如ListItemText，在我的情况下，我更喜欢使用theme 变量，而不是一次性解决方案，在应用程序中处理每个材料组件。

const theme = createMuiTheme({
    overrides: {
        ListItemText: {
            root: {
                color: 'red'
            }
        }
    }
});



render(
    <MuiThemeProvider theme={theme}>
        <Router history={history}>
            <Root store={store} />
        </Router>
    </MuiThemeProvider>
   ,
    document.getElementById('root')
)

我试图按照官方文档 (https://material-ui-next.com/customization/themes/#customizing-all-instances-of-a-component-type) 覆盖 ListItemText 的颜色，但没有工作。

我错过了什么？

Answer 1

如文档here中所述：

如果使用文档中的主题的overrides 键，您需要 使用以下样式表名称：MuiListItemText

所以你的代码应该是

const theme = createMuiTheme({
    overrides: {
        MuiListItemText: {
            root: {
                color: 'red'
            }
        }
    }
});

源代码：https://github.com/mui-org/material-ui/blob/303199d39b42a321d28347d8440d69166f872f27/packages/material-ui/src/ListItem/ListItem.js#L208