Reactjs 将此材质用于Popover的UI挂钩api转换为用于Popover的样式化组件api

我已经编辑了我的原始帖子，到目前为止，我能够用这个实现重构钩子，现在，移动鼠标光标的行为不会关闭弹出框。这就是我到目前为止所做的：

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>

import React，{Fragment，useState}来自'React'；
从“../../propTypes”导入propTypes；
从“@material ui/core”导入{网格、排版、框、Popover}；
从'@material ui/core/styles'导入{makeStyles，styled}；
从“@material ui/icons/inforofiled”导入InfoIcon；
从“@material ui/core/styles/colormipulator”导入{fade}；
export const InfoIconWrapper=styled（InfoIcon）（（{theme}）=>({
颜色：淡入淡出（theme.palette.black，0.3），
}));
export const GridWrapper=styled（Grid）（{theme}）=>({
pointerEvents:'无'，
填充：主题间距（1），
}));
常量DistributionLinePopover=（{distributionLine}）=>{
常量[anchorEl，setAnchorEl]=useState（null）；
const handlePopoverOpen=事件=>{
Setancorel（事件当前目标）；
控制台日志（“打开”）
};
常量handlePopoverClose=（）=>{
setAnchorEl（空）；
控制台日志（“关闭”）
};
常量开=布尔值（主播）；
返回(

---

当用户将鼠标移离popover时，如何关闭popover？onExit、onExit、onExit不会产生所需的行为。

您需要使用

从“@material ui/core/styles”导入{withStyles}

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

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

您的

className

属性将是

className={classes.popover}

（或您正在使用的任何属性）。注意，

classes

被传递到您的组件中，因此您将从签名中获得它，即

函数组件（{classes}）{…}

最后，将类导出为：

---

导出默认样式（样式）（组件）

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

他要求使用样式化组件库的解决方案他们正在使用MaterialUI，他们的约束是“不使用挂钩”不幸的是，这不起作用。我们也不能使用HOC包装。我将编辑我的原始帖子，向您展示我到目前为止所拥有的内容。到目前为止，我已经让它起到了作用，除了onMouseLeave事件不起作用，除非用户点击popover。