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.

Crear un issue en GitHub sobre este artículo

Leer a continuación