Добавьте эффект наведения, чтобы реагировать на div, используя встроенный стиль

Question

У меня есть div, который принимает форму круга, свойство css для отображения круга взято из класса circle. Цвет кругового элемента взят из встроенного стиля. Здесь используется функция Status(), которая возвращает шестнадцатеричный код цвета. Круг отображается с цветами в соответствии со статусом, который мы передаем функции Status. Для достижения эффекта наведения я добавил свойство: hover к объекту стиля, но оно не работает. Вот код, который я пробовал. Есть идеи, как этого добиться? Мне нужно добавить границу / свечение в круг при наведении мыши.

<div
  className="circle"
  style={{
   backgroundColor: Status('new'),
   ':hover': {
     boxShadow: `0px 0px 4px 2px ${Status('complience')}`,
    },
   }}
 />

Answer 1

Попробуйте добавить & до :hover

Это невозможно для встроенных стилей, вы можете использовать реквизиты onMouseEnter и onMouseLeave, чтобы получить состояние наведения и использовать его, например:

class MyComponent extends React.Component {
  state= {
    hover: false,
  }
  handleMouseEnter = () => {
    this.setState({ hover: true });
  }
  handleMouseLeave = () => {
    this.setState({ hover: false });
  }
  render() {
    const { hover } = this.state;
    return(
      <div
        className="circle"
        style={{
          backgroundColor: Status('new'),
          ...(hover && { boxShadow: `0px 0px 4px 2px ${Status('complience')}`}),
        }}
        onMouseEnter={this.handleMouseEnter} // Or onMouseOver
        onMouseLeave={this.handleMouseLeave}
      />
    )
  }
}

Альтернативы:

• Использовать стороннюю библиотеку стилей (например, Styled-components )
• Использовать имена классов / таблицы стилей CSS