Fluent UI Stack组件内PrimaryButton如何调整为自适应内容宽度

出现该问题的原因是Fluent UI的Stack组件默认采用flex布局，垂直排列的Stack默认会拉伸所有子元素占满可用水平宽度，你可以通过以下两种方式实现按钮仅适配自身内容宽度：

• 方法一：调整Stack全局对齐规则
  给Stack组件添加horizontalAlign="start"属性，修改所有子元素的水平对齐逻辑，不再强制拉伸：

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

如果你用的是水平排列的Stack，对应添加verticalAlign="start"属性即可。

• 方法二：单独控制按钮对齐，不影响其他子元素
  如果不需要修改整个Stack的对齐规则，仅需要调整该按钮的宽度，可以给PrimaryButton添加alignSelf样式覆盖默认拉伸行为：

return (
  <Stack grow={false}>
    <PrimaryButton 
      text="Download Instruments" 
      onClick={downloadInstruments}
      style={{ alignSelf: 'flex-start' }}
    />
  </Stack>
)

内容的提问来源于stack exchange，提问作者rsp