文本颜色在 Material-UI 主题中不起作用

Question

使用 Material-UI 创建颜色主题时，我将对比文本设置为白色 (#fff)。它适用于具有主要颜色的按钮，但不适用于次要颜色。

按此处所述尝试覆盖：材料 UI：无法更改主题中的按钮文本颜色。如果覆盖可以解决它，那么我需要帮助编写一个。

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>

Answer 1

为了有两种颜色的白色文本，您需要：

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