How to set MuiButton text and active color

Question

I'm creating a Material-UI theme with:

export const theme = createMuiTheme({
  palette: {
    primary: {
      main: '#7ab800',
      dark: '#34b233',
    },
  })

which gives me a Button with a default of the main color and the active background is the dark green:

However I want the text to be white. If I define contrastText in the primary property with:

export const theme = createMuiTheme({
  palette: {
    primary: {
      main: '#7ab800',
      dark: '#34b233',
      contrastText: 'white',
    },
  })

on being active, the active background is now lighter than the main...

Answer 1

The "active" background you are referring to is caused by the Button's TouchRipple effect. You can find the styling for this in the TouchRipple source code:

  /* Styles applied to the internal `Ripple` components `child` class. */
  child: {
    opacity: 1,
    display: 'block',
    width: '100%',
    height: '100%',
    borderRadius: '50%',
    backgroundColor: 'currentColor',
  }

Notice that the backgroundColor of the ripple is 'currentColor'. So when the text color is black, the ripple's background color is black and when the text color is white the ripple's background color is white. This helps ensure that the ripple causes a visible effect on the button -- a black ripple on a button with a black background wouldn't show up, but the current color should always be a contrast to the background.

Like nearly all styles in Material-UI, you can of course customize this once you know how. In the sample code below you can see how to override this in the theme using overrides: { MuiTouchRipple: {...} } or on a single button using TouchRippleProps passing in the child class within the classes prop.

import React from "react";
import ReactDOM from "react-dom";
import {
  createMuiTheme,
  MuiThemeProvider,
  withStyles
} from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";
const theme1 = createMuiTheme({
  palette: {
    primary: {
      main: "#7ab800",
      dark: "#34b233"
    }
  }
});
console.log(theme1);
const theme2 = createMuiTheme({
  palette: {
    primary: {
      main: "#7ab800",
      dark: "#34b233",
      contrastText: "white"
    }
  }
});
const theme3 = createMuiTheme({
  palette: {
    primary: {
      main: "#7ab800",
      dark: "#34b233",
      contrastText: "white"
    }
  },
  overrides: {
    MuiTouchRipple: {
      child: {
        backgroundColor: "rgba(0, 0, 0, 0.87)"
      }
    }
  }
});
const styles = {
  child: {
    backgroundColor: "rgba(0, 0, 0, 0.87)"
  }
};

function App({ classes }) {
  return (
    <>
      <MuiThemeProvider theme={theme1}>
        <Button variant="contained" color="primary">
          Theme 1
        </Button>
      </MuiThemeProvider>
      <br />
      <MuiThemeProvider theme={theme2}>
        <Button variant="contained" color="primary">
          Theme 2
        </Button>
        <Button variant="contained" color="primary" disableRipple>
          Theme 2 No Ripple
        </Button>
        <Button
          TouchRippleProps={{ classes: classes }}
          variant="contained"
          color="primary"
        >
          Theme 2 button-specific Ripple Override
        </Button>
      </MuiThemeProvider>
      <br />
      <MuiThemeProvider theme={theme3}>
        <Button variant="contained" color="primary">
          Theme 3 - theme-wide Ripple Override
        </Button>
      </MuiThemeProvider>
    </>
  );
}
const StyledApp = withStyles(styles)(App);
const rootElement = document.getElementById("root");
ReactDOM.render(<StyledApp />, rootElement);