IT技术 - 切换按钮/减小宽度网格和 div 语义react - 吾爱随笔录

我有一个有大小的菜单，当你点击按钮时，它会将宽度减小到 50px

即我将有一个带有按钮和图标的菜单，单击按钮时只会出现图标

但我很难做到如何减少 div 的宽度以及它如何在语义网格上工作

代码：

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

    <Grid.Column computer={2} tablet={4} mobile={5} style={{background: '#000', padding:'0', height:'100vh'}}>

    <div style={{background:'#000', width:'100%', height:'100%'}}>

    </div>
    </Grid.Column>
    <Grid.Column width={14} style={{background: '#eee', padding:'0'}}>
          <Button icon onClick={handleClick}>
            <Icon name="align justify" />
          </Button>
    </Grid.Column>
   </Grid>
  );
}

css：

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#root,
.App,
.ui.grid{
  height: 100vh !important;
  margin: 0 !important;
  padding:0 !important;
}

代码：https : //codesandbox.io/s/cool-kepler-cxj4x

import React, { useState } from "react"; import { Grid, Button, Icon } from "semantic-ui-react"; import "./style.css"; function Menu() { const [open, setOpen] = useState(true); // declare new state variable "open" with setter const handleClick = e => { e.preventDefault(); setOpen(!open); }; return ( <Grid style={{ background: "#eee" }}> <Grid.Column computer={2} tablet={4} mobile={5} style={{ background: "#000", padding: "0", height: "100vh" }} > <div style={{ background: "red", width: open ? "100%" : "calc(100% - 50px)", height: "100vh" }} /> </Grid.Column> <Grid.Column computer={14} tablet={12} mobile={11} style={{ background: "#eee", padding: "0" }} > <Button icon onClick={handleClick}> <Icon name="align justify" /> </Button> </Grid.Column> </Grid> ); } export default Menu;