使用 Material-UI 创建颜色主题时，我将对比度文本设置为白色 (#fff)。它适用于具有原色的按钮，但不适用于次要颜色。
尝试了如下所述的覆盖：Material UI：无法更改主题中的按钮文本颜色 https://stackoverflow.com/questions/47813481/material-ui-unable-to-change-button-text-color-in-theme。如果重写可以解决这个问题，那么我需要帮助编写一个。
const colortheme = createMuiTheme({
palette: {
primary: { main: '#e91e63' },
secondary: { main: '#03a9f4' },
contrastText: '#fff',
}
});
期望两个按钮都有白色文本。取而代之的是一键黑色：
编辑：我创建了主题并在父级上渲染 Material UI 的 SimpleModal 组件，将主题道具传递给子级。该按钮呈现在子项上。
parent:
const blues = createMuiTheme({
palette: {
primary: { main: '#00e5ff' },
secondary: { main: '#2979ff' },
contrastText: '#fff'
}
})
<SimpleModal label="content" theme={blues} color="primary" document="content" />
child:
<div>
<MuiThemeProvider theme={this.props.theme}>
<Button className={classes.margin} variant="contained" color={this.props.color} onClick={this.handleOpen}>{this.props.label}</Button>
</MuiThemeProvider>
<Modal open={this.state.open} onClose={this.handleClose}>
<div style={getModalStyle()} className={classes.paper}>
<Typography variant="h6" id="modal-title">{this.state.reference}</Typography>
<Typography variant="subtitle1" id="simple-modal-description">{this.state.content}</Typography>
</div>
</Modal>
</div>
为了使两种颜色都有白色文本，您需要：
const colortheme = createMuiTheme({
palette: {
primary: { main: "#e91e63", contrastText: "#fff" },
secondary: { main: "#03a9f4", contrastText: "#fff" }
}
});
The contrastText必须在每种颜色意图中指定。
这是显示这一点的完整示例：
文档：https://material-ui.com/customization/palette/#providing-the-colors-directly https://material-ui.com/customization/palette/#providing-the-colors-directly
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
