How do you access the Material UI theme inside event handlers?

Question

I have event handlers for things like onClick or onFocus, and I can't figure out how to use the theme inside of the handler code. I want to change the color of an iconButton and I don't want to hard-code the color because we want components that can be general use, and eventually work with themes using completely different colors.

Tried using withTheme in addition to withStyles, so I can get the theme inside of the render(), but I can't get to it from a handler called from that rendering. Tried passing it, calling as a prop, declaring constants based upon theme values in the class (both inside and outside of render), nothing.

I don't know if this is possible, or not built in, or what. I'm hoping that I'm just missing something.

Environment: CodeSandBox, so CreateReactApp. Material-UI plus React-Select, withStyles and withTheme (useTheme help here?).

  handleInfoClick = (e) => {
    if (this.instructionsContent.current.style.display !== "block") {
      this.instructionsContent.current.style.display = "block";
      this.instructionsButton.current.style.color = "#f9be00"; //works
    } else {
      this.instructionsContent.current.style.display = "none";
      this.instructionsButton.current.style.color = this.theme.palette.text.disabled; // doesn't work

also tried this:

  handleSelectFocus = () => {
    if (this.state.visited === false) {
      this.instructionsContent.current.style.display = "block";
      this.instructionsButton.current.style.color = this.activeButtonColor; 
      this.setState({ visited: true });
    }
  };
...
render() { 
    const { theme } = this.props;
...
    const activeButtonColor = theme.palette.secondary.main;

Finally, also tried to use the classes I can use within render(), but it doesn't recognize those either:

const styles = theme => ({
...
  infoButton: {
    position: "absolute",
    bottom: 0,
    left: 0,
    marginBottom: 20,
    width: 48,
    color: theme.palette.text.disabled,
    "&:active": {
      color: theme.palette.secondary.main
    }
  },
  infoButtonActive: {
    position: "absolute",
    bottom: 0,
    left: 0,
    marginBottom: 20,
    width: 48,
    color: theme.palette.secondary.main
  },
....

Hoping one of these approaches would give me a color for my <IconButton> - from my theme:

          <div className={classes.infoButtonDiv}>
            <IconButton
              aria-label="Instructions"
              className={classes.infoButton}
              buttonRef={this.instructionsButton}
              onClick={this.handleInfoClick}
            >
              <HelpOutline />
            </IconButton>
          </div>

(in a different theme.js file applied to the root element:

const theme = createMuiTheme({
  typography: {
    fontFamily: ["Roboto", '"Helvetica Neue"', "Arial", "sans-serif"].join(",")
  },
  palette: {
    primary: {
      main: "#00665e"
    },
    secondary: {
      main: "#f9be00"
    }
  },
  overrides: {
    LeftNav: {
      drawerDiv: {
        backgroundColor: "#00665e",
        width: 300
      }
    }
  },
  direction: "ltr",
  typography: {
    useNextVariants: true
  }
});

You may be stifled by the limited types handled by IconButton's color prop. It seems to only take string values of "primary", "secondary", "default", and "inherit". — It'sNotMe

It'sNotMe It'sNotMe · Accepted Answer · 2019-03-28T09:39:18

Triggering a state change onClick will update the color, but only if you pass one of the supported values for the IconButton color prop ("primary" or "secondary").

import React, { Component } from "react";
import IconButton from "@material-ui/core/IconButton";
import DeleteIcon from "@material-ui/icons/Delete";

class ButtonStyle extends Component {
  constructor(props) {
    super(props);

    this.state = {
      buttonColor: "primary"
    };
  }

  handleClick = e => {
    this.setState({
      buttonColor: "secondary"
    });
  };

  render() {
    const buttonColor = this.state.buttonColor;

    return (
      <div>
        <IconButton
          aria-label="Delete"
          color={buttonColor}
          onClick={this.handleClick}
        >
          <DeleteIcon />
        </IconButton>
      </div>
    );
  }
}

export default ButtonStyle;

How do you access the Material UI theme inside event handlers?

1 Answers