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 .

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