Использование реквизита для установки цвета фона '&: hover'

Question

Я обертываю компонент микросхемы Material-UI, чтобы можно было передавать значения, отличные от «primary» и «Secondary», для проповеди colors. Я также хочу сохранить эффект наведения, если на чипе можно щелкнуть мышью, чтобы при переходе курсора на него был выбран другой цвет. Цвета передаются как реквизиты, поэтому достаточно просто установить backgroundColor и color:

<Chip
  style={{
    backgroundColor: props.backgroundColor,
    color: props.color
  }}
/> 

Однако, так как я также хотел бы передать цвет при наведении, как опору, мне нужно сделать что-то вроде этого:

<Chip
  style={{
    backgroundColor: props.backgroundColor,
    color: props.color,
    '&:hover': {
      backgroundColor: props.hoverBackgroundColor,
      color: props.hoverColor
    }
  }}
/> 

Однако &:hover (насколько я знаю) нельзя использовать внутри style проп. Как правило, &:hover будет использоваться внутри объекта стилей, который передается в withStyles, но я не могу получить доступ к реквизиту оттуда. Есть предложения?

Answer 1

Этого можно добиться, создав собственный компонент чипа.Чтобы использовать реквизит для управления стилем, вы можете использовать функцию makeStyles из пакета "@ material-ui / styles" .Этот пакет по-прежнему считается «альфа», но он предназначен для реализации стиля по умолчанию для v4 Material-UI.Функция makeStyles возвращает ловушку, которая может принимать параметр объекта для предоставления переменных вашим стилям.

Вот возможная реализация CustomChip:

import React from "react";
import Chip from "@material-ui/core/Chip";
import { makeStyles } from "@material-ui/styles";
import { emphasize } from "@material-ui/core/styles/colorManipulator";

const useChipStyles = makeStyles({
  chip: {
    color: ({ color }) => color,
    backgroundColor: ({ backgroundColor }) => backgroundColor,
    "&:hover, &:focus": {
      backgroundColor: ({ hoverBackgroundColor, backgroundColor }) =>
        hoverBackgroundColor
          ? hoverBackgroundColor
          : emphasize(backgroundColor, 0.08)
    },
    "&:active": {
      backgroundColor: ({ hoverBackgroundColor, backgroundColor }) =>
        emphasize(
          hoverBackgroundColor ? hoverBackgroundColor : backgroundColor,
          0.12
        )
    }
  }
});
const CustomChip = ({
  color,
  backgroundColor,
  hoverBackgroundColor,
  ...rest
}) => {
  const classes = useChipStyles({
    color,
    backgroundColor,
    hoverBackgroundColor
  });
  return <Chip className={classes.chip} {...rest} />;
};
export default CustomChip;

Подход к стилю (включая использованиефункция emphasize для генерации наведения и активных цветов) основана на подходе, используемом для Chip.

. Затем можно использовать его следующим образом:

      <CustomChip
        label="Custom Chip 1"
        color="green"
        backgroundColor="#ccf"
        onClick={() => {
          console.log("clicked 1");
        }}
      />
      <CustomChip
        label="Custom Chip 2"
        color="#f0f"
        backgroundColor="#fcc"
        hoverBackgroundColor="#afa"
        onClick={() => {
          console.log("clicked 2");
        }}
      />

Вот CodeSandbox, демонстрирующий это: