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

Question

当我为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>

- cDub

---

你使用什么代码来创建按钮并使用主题？ - user9903

我认为颜色受背景影响。因此，您必须选择与正确背景相匹配的正确颜色。请参见：https://material-ui.com/style/color/ - I_Al-thamary

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

- Ryan Cogswell

---

非常清楚，我会删除我的评论。无论我之前在文档中搜索的地方都不够清晰，但我不记得具体是哪些页面了。 - cDub

Answer 2

尝试添加单独的对比文本并进行更改，直到匹配，因为颜色受背景影响。因此，您必须选择正确的颜色与正确的背景相匹配。请参阅此链接：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' },

    }
})

- I_Al-thamary