求助：将CSS悬停网页预览效果转换为Material UI makeStyles实现

需要给IconButton添加功能：鼠标悬停HelpIcon时显示网页预览。已有原生CSS实现，需转换为Material UI的makeStyles写法，现有代码存在问题，请求修复。

原CSS实现 #

.box{
    display: none;
    width: 100%;
}

a:hover + .box,.box:hover{
    display: block;
    position: relative;
    z-index: 100;
}

现有组件代码 #

const HoverText = () => {
    return (
        <div className={classes.box}>
            <iframe src="https://en.wikipedia.org/" width="500px" height="500px">
            </iframe>
        </div>
    );
};

return (
    <>
        <IconButton size="large" color="inherit" onClick={() => window.open("https://en.wikipedia.org/", "_blank")}>
            <HelpIcon className={classes.act} />
            <HoverText />
        </IconButton>
    </>
);

待修复的useStyles代码 #

const useStyles = makeStyles((theme: Theme) =>
    createStyles({
        box: {
            width: '100%',
            display: 'none'
        },
        act: {
            "&:hover + .box, .box:hover": {
                display: 'block',
                position: 'relative',
                zIndex: 100
            }
        }
    }),
);

修复方案 #

问题分析 #

1. Material UI的makeStyles会生成哈希化的类名，直接使用.box这类原生类名选择器无法匹配目标元素。
2. 原结构中HoverText是IconButton的子元素，并非HelpIcon的相邻兄弟，相邻选择器+无效。
3. 原样式的相对定位会影响页面布局，建议改用绝对定位。

修复后的代码 #

调整后的useStyles

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    iconButton: {
      position: 'relative', // 作为子元素绝对定位的参考容器
    },
    box: {
      position: 'absolute',
      top: '100%',
      left: 0,
      width: '500px',
      height: '500px',
      display: 'none',
      zIndex: 100,
    },
    // 监听IconButton的hover状态，控制内部.box的显示
    iconButtonHover: {
      '&:hover $box': {
        display: 'block',
      },
    },
  }),
);

调整后的组件代码

return (
  <IconButton
    size="large"
    color="inherit"
    onClick={() => window.open("https://en.wikipedia.org/", "_blank")}
    className={classes.iconButtonHover}
  >
    <HelpIcon />
    <div className={classes.box}>
      <iframe src="https://en.wikipedia.org/" width="100%" height="100%"></iframe>
    </div>
  </IconButton>
);

说明 #

• 使用$box引用内部定义的类名，确保匹配Material UI生成的哈希类名。
• 将IconButton设为相对定位，让预览框（绝对定位）基于它定位，避免打乱页面布局。
• 通过监听IconButton的hover状态控制预览框显示，逻辑更合理，也覆盖了鼠标停留在预览框上的场景。

内容的提问来源于stack exchange，提问作者adym