在 FluentUI + React 中如何使子组件仅在父组件悬停时可见？

Question

这里是StackBlitz

我正在尝试创建一个代表可删除项目的卡片组件，并且我希望删除按钮仅在卡片悬停时才可见。

根据我的发现，这种样式应该可以解决问题，但删除按钮顽固地保持隐藏状态。

const styles = makeStyles({
    itemContainer: { }
    buttonContainer: {
        visibility: "hidden",
    },
    "&:hover .buttonContainer": {
        visibility: "visible",
    },
});

// later in that same scope...

<Card
    key={"savedItem" + index}
    className={styles.item}
    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>

我在这里做错了什么？

Answer 1

在

makeStyles

中你应该定义

  card: {
    width: '360px',
    maxWidth: '100%',
    height: 'fit-content',
    ['& .buttonContainer']: {
      visibility: 'hidden',
    },
    ':hover': {
      ['& .buttonContainer']: {
        visibility: 'visible',
      },
    },
  },

并且按钮容器应该具有类

buttonContainer

工作代码：https://stackblitz.com/edit/ff53e2-zpmwug?file=src%2Fexample.tsx