Material UI and Material UI Icons
React¹⁷.0.2, Material UI⁴.11, Material UI Icons⁴.11.2, Created at July 21, 2021, Read Series…
@material-ui/core is one of the most popular UI components packages for React.
Material-UI provides icons support in three ways:
- Standardized Material Design icons exported as React components (SVG icons).
- With the SvgIcon component, a React wrapper for custom SVG icons.
- With the Icon component, a React wrapper for custom font icons.
Run following command to install core components and icons:
npm install @material-ui/core
npm install @material-ui/icons
You can view src/App.tsx in Basic-1.2. material-ui/core commit.
[Try to understand] <Accordion> component and <ExpandMore /> icon
import { Accordion } from '@material-ui/core';
import { ExpandMore } from '@material-ui/icons';
... // in return()
<Accordion>
<AccordionSummary expandIcon={<ExpandMore />} >
<Typography>Basic-1.2 material-ui/core</Typography>
</AccordionSummary>
<AccordionDetails>
<Typography>Material-UI ^4.11.4</Typography>
</AccordionDetails>
</Accordion>
material-ui/core theme
[Try to understand] @material-ui theme, createMuiTheme, is also demoed in src/theme.tsx and referenced in src/App.tsx.
import red from '@material-ui/core/colors/red';
import { createMuiTheme } from '@material-ui/core/styles';
// A custom theme for this app
const theme = createMuiTheme({
palette: {
primary: {
main: '#556cd6',
},
secondary: {
main: '#19857b',
},
error: {
main: red.A400,
},
background: {
default: '#fff',
},
},
});export default theme;
Enable theme in src/index.tsx
[Try to understand] ThemeProvider with theme, and CssBaseline.
import CssBaseline from '@material-ui/core/CssBaseline';
import { ThemeProvider } from '@material-ui/core/styles';ReactDOM.render(
<ThemeProvider theme={theme}>
{/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
<CssBaseline />
<App />
</ThemeProvider>,
document.querySelector('#root'),
);
Example: material-ui working with AppBar
makeStyles and theme
[Try to understand] makeStyles with theme: useStyles, classes
Material UI Icon, example: MenuIcon
[Try to understand] import MenuIcon
import { AppBar, IconButton, Theme, Toolbar, Typography } from "@material-ui/core";
import MenuIcon from '@material-ui/icons/Menu';
import { makeStyles } from '@material-ui/core';
const useStyles = makeStyles((theme) => ({
root: {
flexGrow: 1,
},
menuButton: {
marginRight: theme.spacing(2),
},
title: {
flexGrow: 1,
},
}));export default function App() {
const classes = useStyles();return (
// For full screen: replace <Container></Container>
// with <div className={classes.root}></div>
<Container maxWidth="xl">
<AppBar position="static">
<Toolbar>
<IconButton color="inherit" aria-label="open drawer">
<MenuIcon />
</IconButton>
<Typography variant="h6" className={classes.title}>
React17MUI4
</Typography>
</Toolbar>
</AppBar>
</Container >
);
}
Github commits is here: Basic-1.2. material-ui/core
Conclusion
material-ui
is an open-source project that features React components that implement Google’s Material Design.
There are far more interesting features that we haven’t covered. For example, Material-UI comes with an opt-in
CssBaseline
component that applies cross-browser normalizations, such as resetting margins or font family…