如何访问事件处理程序中的Material UI主题？

Question

我有onClick或onFocus之类的事件处理程序，我无法弄清楚如何在处理程序代码中使用主题。我想改变iconButton的颜色，我不想硬编码颜色，因为我们想要一般使用的组件，并最终使用完全不同颜色的主题。

除了withStyles之外还尝试使用withTheme，所以我可以在render（）中获取主题，但是我无法从该渲染调用的处理程序中获取它。尝试传递它，调用作为prop，根据类中的主题值（渲染内部和外部）声明常量，什么也没有。

我不知道这是可能的，还是没有内置的，或者是什么。我希望我只是遗漏了一些东西。

环境：CodeSandBox，所以CreateReactApp。 Material-UI加上React-Select，withStyles和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

还试过这个：

  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;

最后，还尝试使用我可以在render（）中使用的类，但它也不识别这些：

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
  },
....

希望其中一种方法能为我的<IconButton>提供一种颜色 - 从我的主题：

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

（在应用于根元素的不同theme.js文件中：

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

Answer 1

触发状态更改onClick将更新颜色，但前提是您传递了IconButton颜色道具（“主要”或“次要”）支持的值之一。

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;