Material-UI styled component rendered in indigo when no such color defined

Question

I'm trying to build a NextJS app with Material-UI drawing inspiration from a boilerplate I found at https://github.com/phuongnq/nextjs-material-design-boilerplate.

My implementation can be reviewed at https://github.com/amitschandillia/proost/tree/master/web.

The boilerplate in question defines a default theme color palette as lightBlue for primary and green for secondary. However, it doesn't define anything explicitly for the button text color. By default, all button text should be white, but when rendered, this code shows a lightBlue button with black text. My question is, why is it changing the default text color for buttons and where in the code can I set it to white?

Also, when I disable the palette definitions section in lib/getPageContext.js:

const theme = createMuiTheme({
    palette: {
        // primary: {
        //     light: lightBlue[300],
        //     main: lightBlue[500],
        //     dark: lightBlue[700],
        // },
        // secondary: {
        //     light: pink[300],
        //     main: pink[500],
        //     dark: pink[700],
        // },
    },
});

I get the primary button in indigo instead of the expected default of lightBlue. I tried looking through the entire codebase but couldn't spot this definition anywhere!

Ryan Cogswell Ryan Cogswell · Accepted Answer · 2019-04-17T18:30:35

The text color is controlled by the contrastText color in the theme. When it isn't explicitly specified, Material-UI has an algorithm for deciding whether to use black or white as the text color for a given background color.

You can find a syntax example in my answer here: Text color not working in Material-UI Theme

You can find documentation about it here: https://material-ui.com/customization/themes/#palette

As far as your second question, the code controlling the colors of the default theme can be found here: https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/styles/createPalette.js#L81

Material-UI styled component rendered in indigo when no such color defined

1 Answers