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}
    />
)

它使用的react-scroll程序包会在每次滚动经过特定的onSetActive时触发ListItem。

我想以最简单的方式使ListItem触发时handleSetActive（from Material-UI）启用其悬停效果。

我如何最好地做到这一点？

Answer 1

以下是default styles中与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属性用于react-scroll的Link来应用具有以下样式的类：https://codesandbox.io/s/reactscroll-gppym。

这是另一个使用引用将类直接应用于DOM节点的沙箱：https://codesandbox.io/s/reactscroll-using-ref-9w8ki;但是，您不应该使用这种方法（仅出于学习目的而显示），因为它比activeClass方法做的工作更多（会做得更糟），并且非常脆弱，因为由于其他原因进行的重新渲染可能会消除通过DOM应用的类。

Material-UI：以编程方式触发悬停效果

1 个答案: