Material-UI: эффект зависания триггера программно

Question

Я рендерил следующий Material-UI компонент в моем приложении:

const handleSetActive = _spyOn => {
  linkEl.current.focus();
};

const linkEl = useRef(null);

return (
    <ListItem
      button
      component={SmoothScrollLink}
      to={cutTo}
      spy
      smooth
      offset={(phone ? -theme.mixins.toolbar.minHeightPhone : -theme.mixins.toolbar.minHeightDesktop) - 20}
      duration={500}
      onSetActive={handleSetActive}
      // className={classNames(spyOn === cutTo && classes.hover)}
      ref={linkEl}
      {...other}
    />
)

Он использует пакет реагировать-прокручивать , который запускает onSetActive всякий раз, когда кто-то прокручивает мимо этого конкретногоListItem.

Я бы хотел, чтобы самым простым способом сделать так, чтобы ListItem ( из Material-UI ) включал эффект наведения при срабатывании handleSetActive.

Как мне лучше всего это сделать?

Answer 1

Вот части стилей по умолчанию , связанные с состоянием наведения ListItem:

export const styles = theme => ({
  /* Styles applied to the (normally root) `component` element. May be wrapped by a `container`. */
  root: {
    '&$selected, &$selected:hover': {
      backgroundColor: theme.palette.action.selected,
    },
  },
  /* Styles applied to the inner `component` element if `button={true}`. */
  button: {
    transition: theme.transitions.create('background-color', {
      duration: theme.transitions.duration.shortest,
    }),
    '&:hover': {
      textDecoration: 'none',
      backgroundColor: theme.palette.action.hover,
      // Reset on touch devices, it doesn't add specificity
      '@media (hover: none)': {
        backgroundColor: 'transparent',
      },
    },
  },
  /* Styles applied to the root element if `selected={true}`. */
  selected: {},
});

Поскольку в вашем случае у вас есть button={true}, нужный вам стиль можетбыть достигнуто с помощью класса CSS, который применяет следующее:

      textDecoration: 'none',
      backgroundColor: theme.palette.action.hover,

Вот песочница, которая показывает использование свойства activeClass для Link response-scroll для применения класса с этим стилем: https://codesandbox.io/s/reactscroll-gppym.

Вот еще одна песочница, использующая ссылку для применения класса непосредственно к узлу DOM: https://codesandbox.io/s/reactscroll-using-ref-9w8ki; однако вы не должны использовать этот подход (показывать его только в учебных целях), поскольку он выполняет больше работы (будетпроизводительность хуже, чем activeClass и очень хрупкая, поскольку повторный рендеринг по другим причинам может уничтожить класс, примененный через DOM.