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

问题描述

使用Material-UI为颜色创建主题时，我将对比文字设置为白色(#fff).它适用于具有原色而不是辅助色的按钮.

When creating a theme for colors with Material-UI, I set contrast text to white (#fff). It is working for the button with primary color, but not secondary.

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

Tried overrides as described here: Material UI: Unable to change button text color in theme. If an override will solve it, then I need help writing one.

const colortheme = createMuiTheme({
    palette: {
        primary: { main: '#e91e63' },
        secondary: { main: '#03a9f4' },
        contrastText: '#fff',
    }
});

期望两个按钮都具有白色文本.而是将一个按钮变成了黑色:

Expecting both buttons to have white text. Instead got one button black:

我创建了主题，并在父级上渲染了Material UI的SimpleModal组件，将主题道具传递给了子级.该按钮将呈现在孩子身上.

I created the theme and rendered Material UI's SimpleModal component on the parent, passing theme props to the child. The button is rendered on the child.

父母:

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>

推荐答案

要使两种颜色的文本均为白色，您需要:

In order to have white text for both colors, you want:

const colortheme = createMuiTheme({
  palette: {
    primary: { main: "#e91e63", contrastText: "#fff" },
    secondary: { main: "#03a9f4", contrastText: "#fff" }
  }
});

必须在每种颜色意图内指定contrastText.

The contrastText must be specified within each color intention.

以下是显示此内容的完整示例:

Here's a full example showing this:

这篇关于文字颜色在Material-UI主题中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！