[英]Text color not working in Material-UI Theme
使用 Material-UI 创建颜色主题时,我将对比文本设置为白色 (#fff)。 它适用于具有原色的按钮,但不适用于次要颜色。
已按此处所述尝试覆盖: 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 组件,将主题道具传递给了孩子。 该按钮呈现在孩子身上。
父母:
const blues = createMuiTheme({
palette: {
primary: { main: '#00e5ff' },
secondary: { main: '#2979ff' },
contrastText: '#fff'
}
})
<SimpleModal label="content" theme={blues} color="primary" document="content" />
孩子:
<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" }
}
});
contrastText
必须在每个颜色意图中指定。
这是一个完整的例子:
文档: https ://material-ui.com/customization/palette/#providing-the-colors-directly
尝试添加一个单独的 contrastText 并更改它直到它匹配,因为颜色受背景影响。 所以你必须选择合适的颜色和合适的背景。 看到这个: https ://material-ui.com/style/color/
const blues = createMuiTheme({
palette: {
primary: { main: '#00e5ff',contrastText: '#fff', },
secondary: { main: '#2979ff',contrastText: '#000', },
}
})
对于上面的两种颜色,请使用以下代码:
const blues = createMuiTheme({
palette: {
primary: { main: '#e91e63' },
secondary: { main: '#0277bd' },
}
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.