Как изменить class родителя, при наведении на дочерний элемент?

Чтобы изменить класс родителя при наведении на дочерний элемент в React, необходимо использовать состояние (state) и обработчики событий.

1. Создайте компонент-родитель, который будет содержать дочерние элементы:

import React, { useState } from 'react';

const ParentComponent = () => {
  const [isHovered, setIsHovered] = useState(false);

  const handleMouseEnter = () => {
    setIsHovered(true);
  };

  const handleMouseLeave = () => {
    setIsHovered(false);
  };

  return (
    <div className={`parent ${isHovered ? 'hovered' : ''}`}>
      <ChildComponent
        onMouseEnter={handleMouseEnter}
        onMouseLeave={handleMouseLeave}
      />
      {/* Другие дочерние компоненты */}
    </div>
  );
};

export default ParentComponent;

2. Создайте компонент-дочерний элемент:

import React from 'react';

const ChildComponent = ({ onMouseEnter, onMouseLeave }) => {
  return (
    <div
      className="child"
      onMouseEnter={onMouseEnter}
      onMouseLeave={onMouseLeave}
    >
      {/* Содержимое дочернего компонента */}
    </div>
  );
};

export default ChildComponent;

3. В CSS файле определите стили для классов "parent" и "hovered":

.parent {
  /* Стили для родительского элемента при отсутствии наведения */
}

.parent.hovered {
  /* Стили для родительского элемента при наличии наведения */
}

.child {
  /* Стили для дочернего элемента */
}

Теперь, когда пользователь наводит курсор на дочерний элемент, происходит вызов обработчика события onMouseEnter, который изменяет состояние переменной isHovered на true.
В результате, у родительского элемента добавляется класс "hovered", благодаря чему меняются соответствующие стили.

При уходе курсора мыши с дочернего элемента будет вызван обработчик события onMouseLeave, который изменит состояние переменной isHovered на false.
В итоге, у родительского элемента удалится класс "hovered" и стили будут возвращены к исходному состоянию.