Office Fabric UI React - HoverCard 宽度

Question

我使用 HoverCard Office Fabric UI React 组件来显示图像预览，虽然我可以配置卡片的高度，但我没有看到类似的宽度属性。设置宽度的可能解决方案是什么？我看到了属性styles?: IHoverCardStyles，但不明白如何使用它。谢谢。

Answer 1

HoverCard.styles 允许为 宿主元素 指定样式，但在 HoverCard.expandingCardProps 属性之后是什么。

指定HoverCard 自定义宽度的一个选项是通过IExpandingCardProps.styles 覆盖样式，如下所示：

public render() {

    const rootStyle = { width: "800px" }; //set custom width 

    const expandingCardProps: IExpandingCardProps = {
        onRenderCompactCard: this.renderCompactCard,
        onRenderExpandedCard: this.renderExpandedCard,
        renderData: itemDetails,
        styles: {"root": rootStyle}
    };



    return (
        <div>
            <HoverCard expandingCardProps={expandingCardProps} instantOpenOnClick={true}>
                <div>{itemDetails.title}</div>
            </HoverCard>
        </div>
    );
}

这是demo供您参考