Question

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

Answer 1

HoverCard.styles可以指定 host元素的样式，但您需要使用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供您参考

Office Fabric UI React-HoverCard宽度

1 个答案: