[React]Material UIでレイアウト

レイアウト用のコンポーネントは２つ

Box
https://material-ui.com/components/box/

Container
https://material-ui.com/components/container/

Boxコンポーネントの使用例

import { Box, Button } from "@material-ui/core";

function Component() {
   return (
       <Box display="flex" justifyContent="space-between">
           <Button>a</Button>
           <Button>b</Button>
           <Button>c</Button>
       </Box>
   );
}

function Component() {
   return (
       <Box m={2} p={1} color="palette.primary">
           <div></div>
       </Box>
   );
}

Boxのプロパティmはmargin、pはpaddingを指定できる。

<Box component="span" m={1}>
 <Button />
</Box>

componentをspanにするとhtmlタグのspanのようにBoxが振る舞う。デフォルトではdivとして振る舞う。