Fluent ui Stack 组件使 PrimaryButton 填充所有可用的水平 space。如何让它缩小以适合

Question

当我将 PrimaryButton 放入 Fluent ui 的 Stack 组件中时，按钮在 Electron 应用程序中呈现如下。如何让它缩小以适合？

代码如下

return (
        <Stack grow={false}>
        <PrimaryButton text="Download Instruments" onClick={downloadInstruments} />
        </Stack>
    )

Answer 1

Stack 组件有默认的 width: auto ，这意味着使用父元素的 width 。但是如果你把 Stack.Item 放在 PrimaryButton 上面，一切都会如你所愿：

<Stack>
  <Stack.Item>
    <PrimaryButton text="Download Instruments" onClick={downloadInstruments} />
  </Stack.Item>
<Stack>

Codepen 工作示例。

A Stack is a container-type component that abstracts the implementation of a flexbox in order to define the layout of its children components.

正确使用 Stack 的方法是当您有多个子元素时。没有必要将 Stack 放在一个元素上。

Stack documentation 和工作示例。