MUI - Change Button text color in theme

Question

I'm having a problem with changing button text color directly in the MUI theme. Changing primary color + button font size works fine, so the problem isn't in passing the theme on. Here's my code:

import React from 'react';
import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles';
import { lightBlue } from 'material-ui/colors';
import styled from 'styled-components';

const theme = createMuiTheme({
  palette: {
    primary: lightBlue, // works
  },
  raisedButton: {
    color: '#ffffff', // doesn't work
  },
  typography: {
    button: {
      fontSize: 20, // works
      color: '#ffffff' // doesn't work
    }
  }
});

const App = ({ user, pathname, onToggleDrawer }) => (
  <MuiThemeProvider theme={theme}>
    ...
  </MuiThemeProvider>
);

I also tried using an imported color instead of the #ffffff, but that had no effect either.

Anybody got any ideas?

Answer 1

This worked for me. The color we chose decided to have a dark button contrast color but white as contrast color looks arguably better:

const theme = createMuiTheme({
  palette: {
    primary: {
      main: "#46AD8D",
      contrastText: "#fff" //button text white instead of black
    },
    background: {
      default: "#394764"
    }
  }
});

Answer 2

When you set a color in your Button (e.g. <Button color='primary'), how the text color is applied depend on the variant of the Button:

• text | outlined: Use the main color (e.g. primary.main) as the text color.

• contained: Use the contrastText color as the text color and main color as the background color.

import { blue, yellow } from '@mui/material/colors';
import { createTheme, ThemeProvider } from '@mui/material/styles';

const theme = createTheme({
  palette: {
    primary: {
      main: blue[500],
      contrastText: yellow[500],
    },
  },
});

Live Demo

Related Answer

• Change primary and secondary colors in MUI