Text color not working in Material-UI Theme

Question

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.

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:

Edit: 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.

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>

what code are you using to create the button and to use the theme? — , Dec 21 '18 at 16:22
I think the color is affected by the background. So you have to choose the right color with the right background. See this:https://material-ui.com/style/color/ — I_Al-thamary, Dec 21 '18 at 16:55

Ryan Cogswell · Accepted Answer · 2020-07-17T14:40:24.760

15

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" }
  }
});

The contrastText must be specified within each color intention.

Here's a full example showing this:

Documentation: https://material-ui.com/customization/palette/#providing-the-colors-directly

edited Jul 17 '20 at 14:40

answered Dec 21 '18 at 18:50

Ryan Cogswell

75,046
9
218
198

That is very clear, I will remove my comment. Wherever I was searching on the docs before it wasn’t clear - - but I don’t remember which exact pages those were. – cDub Dec 29 '18 at 07:24

I_Al-thamary · Answer 2 · 2018-12-21T17:16:58.067

Try to add a separate contrastText and change it until it matches because the color is affected by the background. So you have to choose the right color with the right background. See this:https://material-ui.com/style/color/

const blues = createMuiTheme({
    palette: {
        primary: { main: '#00e5ff',contrastText: '#fff', },
        secondary: { main: '#2979ff',contrastText: '#000', },

    }
})

For the two color above use this code:

const blues = createMuiTheme({
    palette: {
        primary: { main: '#e91e63' },
        secondary: { main: '#0277bd' },

    }
})

Text color not working in Material-UI Theme

2 Answers2

Linked