Как получить доступ к теме Material UI внутри обработчиков событий? - PullRequest
Новая
       29

Как получить доступ к теме Material UI внутри обработчиков событий?

0 голосов
/ 28 марта 2019

У меня есть обработчики событий для таких вещей, как onClick или onFocus, и я не могу понять, как использовать тему внутри кода обработчика.Я хочу изменить цвет iconButton и не хочу жестко кодировать цвет, потому что нам нужны компоненты, которые могут быть общего назначения, и в конечном итоге работать с темами, используя совершенно разные цвета.

Пробовал использовать withThemeв дополнение к withStyles, так что я могу получить тему внутри render (), но я не могу получить ее из обработчика, вызванного из этого рендеринга.Попытка передать его, вызвать как пропеллер, объявить константы, основанные на значениях темы в классе (как внутри, так и за пределами рендера), ничего.

Я не знаю, возможно ли это или не встроено,или что.Я надеюсь, что я что-то упустил.

Среда: CodeSandBox, поэтому CreateReactApp.Material-UI плюс React-Select, withStyles и withTheme (воспользуйтесь здесь справкой Theme?). 

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

1 Ответ

0 голосов
/ 28 марта 2019

Запуск изменения состояния onClick обновит цвет, но только если вы передадите одно из поддерживаемых значений для IconButton color prop («основной» или «вторичный»). 

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;
...