在FluentUI + React中实现父组件Hover时子组件可见的问题

你的代码存在几个关键问题，导致删除按钮始终处于隐藏状态：

1. 样式选择器与结构错误 #

• 你将&:hover .buttonContainer作为makeStyles的顶级样式，但它需要嵌套在卡片对应的样式类内部，否则这个hover规则无法绑定到卡片元素上。
• 不能直接使用.buttonContainer这种字符串类名，Material-UI的makeStyles会生成唯一的哈希类名，正确做法是用$buttonContainer这种变量引用方式关联内部类。

2. 卡片类名不匹配 #

你的Card组件使用了className={styles.item}，但styles对象里并没有item这个属性，应该改为styles.itemContainer。

3. 语法错误 #

itemContainer: { }末尾缺少逗号，会导致样式解析失败。

修复后的代码 #

const styles = makeStyles({
  itemContainer: {
    // 可添加卡片基础样式
    "&:hover $buttonContainer": {
      visibility: "visible",
    },
  },
  buttonContainer: {
    visibility: "hidden",
  },
});

// 组件部分
<Card
  key={"savedItem" + index}
  className={styles.itemContainer}
  appearance="subtle"
  onClick={() => {
    // load item
  }}
>
  <CardHeader
    image={<AirplaneRegular/>}
    header={item.displayName}
    action={
      <div className={styles.buttonContainer}>
        <Button
          icon={<Delete16Regular />}
          appearance="subtle"
          onClick={(e) => {
            // delete item
            e.stopPropagation();
          }}
        />
      </div>
    }
  />
</Card>

额外说明 #

• $buttonContainer是Material-UI makeStyles的内部引用语法，能正确关联生成的哈希类名，避免类名冲突。
• 将hover规则嵌套在itemContainer内部，确保只有当卡片被hover时，才会触发按钮显示的样式。

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