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?

Solution 1

Solved it! This finally did the trick:

const theme = createMuiTheme({
  palette: {
    primary: lightBlue,
  },
  overrides: {
    MuiButton: {
      raisedPrimary: {
        color: 'white',
      },
    },
  }
});

So, you just have to use "overrides" and be explicit about the exact type of component you want to change.

Solution 2

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

Solution 3

This solution works for me

const theme = createMuiTheme({
  overrides: {
    MuiButton: {
      label: {
        color: "#f1f1f1",
      },
    },
  },

Solution 4

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

View more solutions

Comments

[jonsbaa]

Thanks for the help! You're right, that SHOULD work according to what can be set (dunno how I missed that) - but, for some reason, it's still not working... It seems that I actually can't get anything passed to "raisedButton", not even the fontSize that worked on "button".

[jonsbaa]

I tried replicating the instructions over here: material-ui-next.com/customization/themes/… Like so: const theme = createMuiTheme({ palette: { primary: lightBlue, }, overrides: { MuiButton: { root: { fontSize: 20, color: 'white', } }, } }); The fontSize part works, but still, the color won't change! (In the example, the "color" property is used for font color instead of textColor)

[alechill]

The docs mention getMuiTheme rather than createMuiTheme material-ui.com/#/customization/themes This seems to do a deep merge on the those component specific ones into the default theme, maybe have better luck with that

[esejuanb]

Hello there, I know this is a bit old (MUI is now version 3+) but I was wondering if you or anybody also did this (specifying exact components) just to override the default MUI palette. It seems like an unnecessary step if you just want to replace ALL components at once!

[VaibS]

Worked for me for button. But got error on chip "Material-UI: Unsupported white color. We support the following formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()." Hence change it to #fff.

[Kapilrc]

You can also add a hover effect to it to override default below color: 'white', add '&:hover' { background: "#000" }