Question

我有用于onClick或onFocus之类的事件处理程序，但我不知道如何在处理程序代码中使用主题。我想更改iconButton的颜色，并且不想对颜色进行硬编码，因为我们希望组件可以通用，并最终使用完全不同的颜色处理主题。

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

我不知道这是否可能，或者不是内置的，还是什么。我希望我只是想念一些东西。

环境：CodeSandBox，所以是CreateReactApp。 Material-UI加上React-Select，withStyles和withTheme（在这里使用thememe帮助？）。

  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;

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

1 个答案: