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

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