Semantic-UI-React中fluid属性导致Reveal组件按钮覆盖异常求助

当给Semantic-UI Reveal组件内的按钮添加fluid属性后，鼠标悬停时无法完全覆盖主按钮并切换显示第二个按钮，仅能部分覆盖；移除fluid属性后，按钮可被完全覆盖。

对比代码：

// 无fluid属性（正常工作）
<Reveal animated="move">
  <Reveal.Content visible>
    <Button color="green">Green</Button>
  </Reveal.Content>
  <Reveal.Content hidden>
    <Button color="red">Red</Button>
  </Reveal.Content>
</Reveal>

// 有fluid属性（异常）
<Reveal animated="move">
  <Reveal.Content visible>
    <Button fluid color="green">
      Green
    </Button>
  </Reveal.Content>
  <Reveal.Content hidden>
    <Button fluid color="red">
      Red
    </Button>
  </Reveal.Content>
</Reveal>

解决方案 #

方案1：给Reveal组件添加fluid属性 #

Semantic-UI的Reveal组件本身支持fluid属性，添加后可让容器宽度与内部fluid按钮匹配，实现完全覆盖切换：

<Reveal animated="move" fluid>
  <Reveal.Content visible>
    <Button fluid color="green">
      Green
    </Button>
  </Reveal.Content>
  <Reveal.Content hidden>
    <Button fluid color="red">
      Red
    </Button>
  </Reveal.Content>
</Reveal>

方案2：自定义CSS调整容器宽度 #

如果不想给Reveal组件加fluid属性，可通过自定义CSS强制设置Reveal容器宽度为100%，确保与fluid按钮宽度一致：

.ui.reveal {
  width: 100%;
}

原因说明 #

默认状态下，Reveal组件为自适应宽度（inline-block特性），而fluid按钮宽度为100%，导致Reveal容器宽度未跟上按钮宽度，鼠标悬停时仅能触发容器原本的宽度范围，因此出现部分覆盖的异常。通过给Reveal加fluid属性或强制设置宽度100%，可让容器与按钮宽度匹配，恢复正常的悬停切换效果。

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