CODEWITHSUNDEEP
reactjsbuttoncolorsmaterial-uithemes
jonsbaa
jonsbaa

Reputation: 589

Material UI - Change Button text color in theme

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?

Upvotes: 25

Views: 85257

Answers (6)

NearHuscarl
NearHuscarl

Reputation: 81290

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

Upvotes: 13

Kelsey Hannan
Kelsey Hannan

Reputation: 2947

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>

Upvotes: 3

U.A
U.A

Reputation: 3373

This solution works for me

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

Upvotes: 3

CodingYourLife
CodingYourLife

Reputation: 8588

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

Upvotes: 38

jonsbaa
jonsbaa

Reputation: 589

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.

Upvotes: 29

alechill
alechill

Reputation: 4502

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!!!

Upvotes: 0

Related Questions