Fluent UI Toggle标签在父容器flex-wrap:wrap时意外换行如何解决

问题原因 #

FluentUI v8的Toggle组件根元素默认是inline-block属性，当它作为flex容器的直接子项时，会继承flex布局默认的flex-shrink: 1规则，允许自身被收缩宽度。当父容器剩余宽度不足时，Toggle会被压缩到小于内部文本所需的宽度，最终导致文本换行。
你在codepen未复现的原因通常是codepen默认的预览容器宽度足够，没有触发宽度收缩的阈值，本地环境的外层布局宽度更窄才会触发该问题。

解决方案 #

你不需要修改父容器的flex相关配置，任选以下一种方案即可解决：

• 方案1：通过Toggle自带的styles属性自定义样式，禁止自身收缩并强制文本不换行

<Toggle 
  onText="Width Limit Auto" 
  offText="Width Limit Manual"
  styles={{
    root: {
      flexShrink: 0,
      whiteSpace: 'nowrap'
    }
  }}
/>

• 方案2：在Toggle外层套一层容器，设置该容器不允许收缩

<div style={{ display: 'flex', flexWrap: 'wrap' }}>
  <div style={{flexShrink: 0}}>
    <Toggle onText="Width Limit Auto" offText="Width Limit Manual"/>
  </div>
</div>

• 方案3：直接给Toggle根元素设置最小宽度为内容宽度

<Toggle 
  onText="Width Limit Auto" 
  offText="Width Limit Manual"
  styles={{
    root: {
      minWidth: 'fit-content'
    }
  }}
/>

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