CODEWITHSUNDEEP
reactjsmaterial-uimaterial-design
theJuls
theJuls

Reputation: 7470

Change Secondary button text color through Material UI Theme

I am making use of both of the primary and secondary buttons on my app. It seems that by default the primary button's color is white, which is fine. But I need my secondary button color to also be white, which it is not.

Here is what my code currently looks like:

const theme = createMuiTheme({
    palette: {
        primary: {
            main: '#FF0000'
        },
        secondary: {
            main: '#00FF00'
        },
        // Probably unrelated? But tried anyway...
        text: {
            primary: '#FFFFFF',
            secondary: '#FFFFFF'
        }
    },
    // Can override primary's text color from here, but no clue how to
    // do so with the secondary
        MuiButton: {
            text: {
                color: '#FFFFFF'
            }
        }
});

// ...
// In my component:
// Expected both buttons to have white text color, however secondary has black text. Need to override this so that both buttons have the same text color.

function MyComponent () {
    return (
        <ThemeProvider theme={theme}>
            <Button color='primary'>Primary</Button>
            <Button color='secondary'>Secondary</Button>
        </ThemeProvider>
    )
}

Edit: I did notice that it seems that the the button's text color is tied to it's background color. So if I put both primary and secondary buttons the same color, both their background color will default to the same. Nevertheless, my question still stands, how can I control this? Mainly for the secondary button?

Upvotes: 1

Views: 4169

Answers (1)

Tony Drummond
Tony Drummond

Reputation: 375

You can set a contrast text as per the below

const theme = createMuiTheme({
    palette: {
        primary: {
            main: "#FF0000",
            contrastText: "#ffffff",
        },
        secondary: {
            main: "#00FF00",
            contrastText: "#ffffff",
        },
    },
});

Upvotes: 2

Related Questions