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>
    );
}

Вот демоверсия для справки