Html 使帆布适合容器

我有以下反应组件：

render() {
    return (
      <div className="App">
        <header className="App-header">
          <AppBar position="static">
            <ToolBar>
              <Grid container>
                <Grid conatiner justify="center" item lg={10}>
                  <p>The Game Of Life</p>
                </Grid>
                <Grid container direction="row" justify="flex-end" alignItems="center" item lg={2}>
                  <this.BarButton label="Clear" callBack={() => this.catchAction('clear')} />
                  <this.BarButton label="Go!" callBack={() => this.catchAction('go')}/>
                </Grid>
              </Grid>
            </ToolBar>
          </AppBar>
          <Grid container directiorn="row" justify="center" alignItems="center" item lg={10}>
            <canvas id="canvas" width="100vw" heigth="100vh" style={{border: '1px solid #000000'}}></canvas>
          </Grid>
        </header>
      </div>
    )
  }

render（）{
返回(
，但它们都不起作用，画布仅覆盖剩余屏幕的一小部分：

我还没有找到解决我的问题的其他解决方案。
我能够使用
样式化组件使画布展开

从“React”导入React；
从“@material ui/core”导入{AppBar、按钮、工具栏、排版}；
从“样式化组件”导入样式化；
const CanvasView=（）=>{
返回(
我可以使用
样式化组件来扩展画布

从“React”导入React；
从“@material ui/core”导入{AppBar、按钮、工具栏、排版}；
从“样式化组件”导入样式化；
const CanvasView=（）=>{
返回(
我错误地尝试这样应用，但它是用于html组件的，而我实际使用的是react组件，因此设置必须作为
样式
道具应用：


更改后，一切正常。
我错误地尝试应用，但它是用于html组件的，而我实际使用的是react组件，因此设置必须作为
样式
道具应用：


这一变化之后，一切都很顺利

import React from "react";
import { AppBar, Button, Toolbar, Typography } from "@material-ui/core";
import styled from "styled-components";

const CanvasView = () => {
  return (
    <div>
      <AppBar position="static">
        <StyledToolbar>
          <Typography variant="h6">Game of Life</Typography>
          <ButtonContainer>
            <Button variant="contained">Clear</Button>
            <Button variant="contained">Go!</Button>
          </ButtonContainer>
        </StyledToolbar>
      </AppBar>
      <CanvasContainer>
        <StyledCanvas />
      </CanvasContainer>
    </div>
  );
};

const StyledToolbar = styled(Toolbar)`
  display: flex;
  flex-direction: row;
  justify-content: space-between;
`;

const ButtonContainer = styled.div`
  & > button {
    margin-left: 16px;
  }
`;

const CanvasContainer = styled.div`
  width: 100vw;
  height: calc(100vh - 64px);
  overflow: hidden;
`;

const StyledCanvas = styled.canvas`
  width: 100%;
  height: 100%;
  background-color: green;
`;

export default CanvasView;