咨询：通过display:none隐藏span标签，inline控制菜单文本显示

嘿，我看你已经搞定了一个带展开/收起效果的菜单按钮，核心逻辑没问题！我把你的代码按更清晰的结构整理出来，方便你查看和维护：

• 利用菜单的展开状态open，动态控制MenuText组件的display属性：
  • 展开时设置为inline-flex，让图标和菜单文本横向排列
  • 收起时设置为none，仅保留图标显示

JSX 部分 #

<ButtonWrap>
  <StyledButton style={{padding:0}}>
    <IconWrap name='facebook' size='big'/>
    <MenuText status={ open ? 'inline-flex' : 'none' }> facebook </MenuText>
  </StyledButton>
</ButtonWrap>

Styled Components 样式部分 #

// 容器样式
export const buttonWrap = css` 
  width: 100%; 
  height: 50px; 
  display: block; 
`;

// 按钮基础样式
export const buttonBase = css` 
  background: transparent !important; 
  width: 100% !important;
  height: 100% !important;
  color: white !important;
  font-weight: bold !important;
  font-size: 0.875rem;
  font-family: Roboto;
  letter-spacing: 0.3px !important;
  margin-bottom: 1.4rem !important; 

  &:hover{ 
    color: white !important; 
    background-color:rgba(186,186,186,0.4) !important; 
  } 

  &:focus{ 
    color: white !important; 
    background-color:#444bf8 !important; 
  }
`;

// 图标容器样式
export const IconWrap = styled(Icon)` 
  display: inline !important; 
  padding: 0 !important; 
  margin: 0 !important; 
  height: 1em; 
`;

额外补充：如果你的MenuText是自定义的styled组件，记得确保它能正确接收status属性并应用样式，比如：

const MenuText = styled.span`
  display: ${props => props.status};
  // 可按需添加文本对齐、间距等样式
  align-items: center;
  margin-left: 0.5rem;
`;

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