Question

我已经编辑了原始帖子，到目前为止，我可以使用此实现从钩子中重构出来，现在，将鼠标光标移开的行为不会关闭弹出窗口。这是我到目前为止的内容：

import React, { Fragment, useState } from 'react';
import propTypes from '../../propTypes';

import { Grid, Typography, Box, Popover } from '@material-ui/core';
import { makeStyles, styled } from '@material-ui/core/styles';
import InfoIcon from '@material-ui/icons/InfoOutlined';
import { fade } from '@material-ui/core/styles/colorManipulator';

export const InfoIconWrapper = styled(InfoIcon)(({ theme }) => ({
  color: fade(theme.palette.black, 0.3),
}));

export const GridWrapper = styled(Grid)(({theme}) => ({
  pointerEvents: 'none',
  padding: theme.spacing(1),
}));

const DistributionLinePopover = ({ distributionLine }) => {
  const [anchorEl, setAnchorEl] = useState(null);

  const handlePopoverOpen = event => {
    setAnchorEl(event.currentTarget);
    console.log("open")
  };

  const handlePopoverClose = () => {
    setAnchorEl(null);
    console.log("close")
  };

  const open = Boolean(anchorEl);

  return (
    <Fragment>
      <Typography
        aria-owns={open ? 'mouse-over-popover' : undefined}
        aria-haspopup="true"
        onMouseEnter={handlePopoverOpen}

      >
        <InfoIconWrapper fontSize="small" />
      </Typography>
      <Popover
        id="mouse-over-popover"
        open={open}
        anchorEl={anchorEl}
        anchorOrigin={{
          vertical: 'bottom',
          horizontal: 'left',
        }}
        transformOrigin={{
          vertical: 'top',
          horizontal: 'left',
        }}
        onClose={handlePopoverClose}
        // onMouseLeave={handlePopoverClose}
        disableRestoreFocus
      >
        <GridWrapper container>

当用户将鼠标移开该弹出窗口时，该怎么办？ onExit，onExited，onExiting不会产生所需的行为。

Answer 1

您需要使用import { withStyles } from '@material-ui/core/styles'

然后，您的样式定义如下：

const styles = theme => ({
    ...
});

您的className属性将是className={classes.popover}（或您使用的任何属性）。请注意，classes被传递到您的组件中，因此您将从签名function Component({classes}) { ... }

中获取它。

最后，您将类导出为：

export default withStyles(styles)(Component)

Answer 2

好的，更新帖子的解决方案是将onClose替换为onMouseOut。

将此用于Popover的Material UI挂钩api转换为Popover的样式化组件API

2 个答案: