css - 切换按钮/带有图标和文字的按钮/

Question

我有一个打开的菜单有一个按钮
与100％witdh
带有文本和图标

当关闭时，只有图标

但是我仍然不知道该怎么做，所以当我的状态关闭时，仅显示图标而不显示文本

另外，我的图标在关闭时不在中心。
代码与我的状态：

function Menu() {
  const [open, setOpen] = useState(true); // declare new state variable "open" with setter
  const handleClick = e => {
    e.preventDefault();
    setOpen(!open);
  };
  return (
    <ContainerGrid style={{background: '#eee'}}>

    {/* <ContainerGridColumn mobile={2} > */}
    <ContainerGridColumnMenu desktop={open ? '12.5%' : '3.5%'} mobile= {open ? '31.25%' : '12.5%'} wdscreen = { open? '80%' : '2%'} >
    <MenuDiv>
    <WrapButton>

    <ButtonStyled style={{padding:0}}>
      <Icon name='facebook' size='big' style={{height: '1em', marginLeft:' 20px', marginRight:'10px'}} /> Facebook
    </ButtonStyled>

    </WrapButton>
    </MenuDiv>
    </ContainerGridColumnMenu>
    <ContainerContent desktop={open ? '87.5%' : '96.5%'} mobile = { open ? '68.75%' : '87.5%' }>
          <Button icon onClick={handleClick}>
            <Icon name="align justify" />
     /ContainerContent>
   </ContainerGrid>
  );
}/ContainerContent>
   </ContainerGrid>
  );
}

有关按钮和菜单的代码：
    
    

<ButtonStyled style={{padding:0}}>
  <Icon name='facebook' size='big' style={{height: '1em', marginLeft:' 20px', marginRight:'10px'}} /> Facebook
</ButtonStyled>

</WrapButton>
</MenuDiv>

css：

export const MenuDiv = styled.div`
width: 100%;
height: 100%;
background: #d987;
padding: 6px;
display:flex;
justify-content: center;
`;

export const WrapButton = styled.div`
  width: 100% ;
  height: 50px ;  
`;


export const ButtonStyled = styled(Button)`
    background: red !important ;
    width: 100% !important;
    height: 100% !important;
    text-align: left !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;
    }
`;

菜单已打开：



关闭：



例：
https://codesandbox.io/s/autumn-cache-0i402

Answer 1

在按钮内的文本周围放置一个跨度：

<button>
    <i>my icon</i>
    <span>my text</span>
</button>

将范围默认设置为不显示：

.ui.button > span {
    display: none;
}

菜单打开时，lnSeap的类出现在按钮的父元素之一上，因此请挂在该类上以在菜单打开时显示按钮内的跨度：

.lnSeap .ui.button > span {
    display: inline;
}