Scraps on Material UI

Creating a Right-Aligned Element

Insert an element with 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>
	);
};

Aligning Heights Between Grids

Use height: 100%.

Preventing Button Text from Being Uppercased

Use 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 .

This will basically handle the replacements. Errors will go away, but some deprecated patterns may remain, so fix them as needed.

Create an issue on GitHub about this article

Read Next