右揃えの要素を作る

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>
  );
};

Grid間の高さを揃える

height: 100%を使う。

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

text-transform: 'none'を使う。

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 .

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

記事に間違い等ありましたら、お気軽に以下までご連絡ください

E-mail: illumination.k.27|gmail.com ("|" replaced to "@")

Twitter: @illuminationK

当HPを応援してくれる方は下のリンクからお布施をいただけると非常に励みになります。

Ofuse

Other Articles

Site Map

Table of Contents

    右揃えの要素を作る

    Grid間の高さを揃える

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

    Material-UI 4 -> 5のmigration


当HPを応援してくれる方は下のリンクからお布施をいただけると非常に励みになります。

Ofuse
Privacy Policy

Copyright © illumination-k 2020-2022.