material-uiに関するスクラップ

右揃えの要素を作る

flexGrow: 1とした要素を挿入する。

import AppBar from "@material-ui/core/AppBar";
import Button from "@material-ui/core/Button";

const Header = () => {
  return (
    <div styles={{ flexGrow: 1 }}>
      <AppBar>
        <Button>Left Button</Button>
        <strong>title</strong>
        <div styles={{ flexGrow: 1 }} />
        <Button>Right Button</Button>
      </AppBar>
    </div>
  );
};

• ReactのMaterial-UIで、右揃えの要素を作るには

Grid間の高さを揃える

height: 100%を使う。

• Material-UIの「Data Grid」で高さを自動設定する

Buttonの中身を大文字にしない

text-transform: 'none'を使う。

• Paper-Button always as upper case

Material-UI 4 -> 5のmigration

yarn add @mui/material @mui/styles @mui/lab @mui/icons-material @emotion/react @emotion/styled

# If you use next,
yarn add @emotion/server

npx @mui/codemod v5.0.0/preset-safe .

で基本的には置換される。エラーは起きなくなるが、推奨されていないものが残ったりはするので適宜修正していく。