search

AyumuOgasawara / receipt-scanner

レシートの写真から家計簿を生成してくれるアプリ
0 stars 0 forks source link

ページのレイアウトを整える #20

Closed AyumuOgasawara closed 1 month ago

AyumuOgasawara commented 1 month ago

概要

ヘッダーとサイドバーは全ページにあり、サイズが変わらないもの。
{children}のサイズを整えて、ヘッダーとサイドバーにかからないようにする。

AyumuOgasawara commented 1 month ago

width:calc(100% - ${drawerWidth}px)`のようにすることで、ページの100%から、指定したサイズだけの削減することができる。<br> marginRight`にすることで、右側にmarginをつけることを宣言する。

 <Box 
      sx={{
        boxSizing: 'border-box',
        width: `calc(100% - ${drawerWidth}px)`,
        marginRight: `${drawerWidth}px`,
      }}
      >