Реагируйте на стиль в реквизите - PullRequest
Новая
       21

Реагируйте на стиль в реквизите

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

Я сделал некоторую стилизацию для кнопки пользовательского интерфейса материала, и теперь я хочу переместить деталь style={{backgroundColor}} в верхнюю часть функции, прямо перед возвратом.

Кто-нибудь знает, как это сделать? 

const styles = {
  root: {
    color: "#FFFFFF",
    backgroundColor: "#05164D",
    transition: "linear 0.5s",
    "&:hover": {
      opacity: 0.9,
      boxShadow: "0 3px 5px 2px rgba(153, 153, 153, .8)"
    }
  }
};

const StyledButton = props => {
  const { classes } = props;
  let customColor = props.customColor || "#05164D";
  let backgroundColor = customColor;

  return (
    <div>
      <IconButton
        className={classes.root}
        {...props}
        aria-label="StyledButton"
        style={{ backgroundColor }}
      />
    </div>
  );
};

export default withStyles(styles)(StyledButton);

1 Ответ

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

Я думаю, что важно упомянуть, что {backgroundColor} является сокращением для {backgroundColor: backgroundColor}. Таким образом, в ES6 вы можете просто использовать имя переменной, если значение свойства должно совпадать с именем переменной. Эта переменная инициализируется внутри фигурных скобок, которые переносят значение свойства. Вот почему это {{ backgroundColor }}. Если вы хотите инициализировать переменную над рендером, вы можете сделать это следующим образом. 

const StyledButton = props => {
  const { classes } = props;
  let customColor = props.customColor || "#05164D";
  let style = { backgroundColor: customColor };

  return (
    <div>
      <IconButton
        className={classes.root}
        {...props}
        aria-label="StyledButton"
        style={style}
      />
    </div>
  );
};
...