MUI+Next.jsで実装する仮想キーボード

MUI + Next.jsの仮想キーボード実装例

実装

ダイジェスト

Keyboard.tsx

function Keyboard(props: {
    layout: Array<Array<string>>,
    onKeyPress: (key: string) => void,
}) {
    return (
      <Box
       sx={theme => ({
         bgcolor: theme.palette.lightgray,
         position: 'fixed',
         height: '50vh',
         width: '100vw',
         bottom: 0,
       })}
      >
        { /* キーボードに含まれる列のコンテナ */ }
        <Grid 
         container
         direction="column"
         spacing={2}
         margin="5%"
        >
          {
            // 列を生成
            props.layout.map((keys, idx) => (
              <Grid
               container
               spacing={2}
               size={12}
               key={`[${keys}]-${idx}`}
              >
                {
                  // キーを生成
                  keys.map((key, idx) => (
                    <Grid size="grow" key={`${key}-${idx}`} >
                      <Button
                       onClick={() => props.onKeyPress(key)}
                       key={`btn-${key}-${idx}`}
                       fullWidth
                       sx={theme => ({
                         color: theme.palette.text.primary,
                         bgcolor: theme.palette.invertableWhite,
                         padding: theme.spacing(2),
                         textAlign: "center",
                         textTransform: "none",
                       })}
                      >
                        {key}
                      </Button>
                    </Grid>
                  ))
                }
              </Grid>
            ))
          }
        </Grid>
    </Box>
  );
});

全実装
デモ

課題

Gridが高さを自動調節してくれない。paddingでいい感じにするのが精一杯だった...
もしかしたらflexboxにstyle="align-items: stretch;"あたりを指定した方が良かったかも