22

I'm having a problem with changing the button text color directly in the Material UI theme. Changing the 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?

Olivier Tassinari
  • 8,238
  • 4
  • 23
  • 23
jonsbaa
  • 539
  • 1
  • 4
  • 11

6 Answers6

31

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"
    }
  }
});
VaibS
  • 1,627
  • 1
  • 15
  • 21
CodingYourLife
  • 7,172
  • 5
  • 55
  • 69
  • 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. – VaibS Jul 24 '20 at 13:22
27

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.

jonsbaa
  • 539
  • 1
  • 4
  • 11
  • 1
    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! – esejuanb Nov 01 '18 at 15:36
  • You can also add a hover effect to it to override default below color: 'white', add '&:hover' { background: "#000" } – Kapilrc Sep 30 '21 at 06:36
9

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

Codesandbox Demo

Related Answer

Olivier Tassinari
  • 8,238
  • 4
  • 23
  • 23
NearHuscarl
  • 66,950
  • 18
  • 261
  • 230
3

This solution works for me

const theme = createMuiTheme({
  overrides: {
    MuiButton: {
      label: {
        color: "#f1f1f1",
      },
    },
  },
U.A
  • 2,991
  • 3
  • 24
  • 36
3

This worked for me, e.g. for custom success and error colors:

// themes.ts
import { createTheme, responsiveFontSizes } from '@mui/material/styles';

// Create a theme instance.
let theme = createTheme({
  palette: {
    primary: {
      main: '#F5F5F5',         // Used elsewhere
    },
    success: {
      main: '#11C6A9',         // custom button color (seafoam green)
      contrastText: '#ffffff', // custom button text (white)
    },
    error: {
      main: '#C6112E',         // custom button color (red)
    },
  },
});

theme = responsiveFontSizes(theme);

export default theme;

Then in your .jsx/.tsx just declare the Button color.

Success button:

<Button
  variant="contained"
  color="success"
>
  Success button text
</Button>

And for the red button w/ outline:

<Button
  variant="outlined"
  color="error">
  Danger button text
</Button>
Kelsey Hannan
  • 2,857
  • 2
  • 30
  • 46
0

From https://github.com/mui-org/material-ui/blob/master/src/styles/getMuiTheme.js#L200 you can see what can be set in the theme for various components, and on raisedButton you will see that color is the actually the button background and to set the text colour you will need to change textColor property instead.

const theme = getMuiTheme({
  raisedButton: {
    textColor: '#ffffff', // this should work
    primaryTextColor: '#ffffff' // or this if using `primary` style
  }
});

Its not exactly intuitive given that CSS color affects text rather than background, and it doesn't even match up with the properties for the component itself http://www.material-ui.com/#/components/raised-button which have props for backgroundColor and labelColor instead!!!

alechill
  • 4,274
  • 18
  • 23
  • 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 Dec 14 '17 at 13:13
  • I tried replicating the instructions over here: https://material-ui-next.com/customization/themes/#customizing-all-instances-of-a-component-type 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) – jonsbaa Dec 14 '17 at 13:22
  • The docs mention `getMuiTheme` rather than `createMuiTheme` http://www.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 – alechill Dec 14 '17 at 13:23