Material UI is a Material Design library made for React.
It’s a set of React components that have Material Design styles.
In this article, we’ll look at how to get started with Material Design.
Installation
We can install the package by running:
npm install @material-ui/core
with NPM or:
yarn add @material-ui/core
to install it with Yarn.
We can also add the Roboto font by writing:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
in our HTML.
Material design icons can be added with:
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
We can then get started by using some components from the package.
Box
We can make our layout with the Box
component.
For example, we can write:
import React from "react";
import Box from "@material-ui/core/Box";
import Button from "@material-ui/core/Button";
export default function App() {
return (
<Box component="span" m={1}>
<Button>foo</Button>
</Box>
);
}
to add the Box
component for layout with a button inside.
component
specifies which component to render as.
We can use clone
to call React.cloneElement
to clone elements:
import React from "react";
import Box from "@material-ui/core/Box";
import Button from "@material-ui/core/Button";
export default function App() {
return (
<Box color="text.primary" clone>
<Button>foo</Button>
</Box>
);
}
Box
can also accept a render props function:
import React from "react";
import Box from "@material-ui/core/Box";
import Button from "@material-ui/core/Button";
export default function App() {
return (
<Box color="text.primary">{props => <Button {...props}>foo</Button>}</Box>
);
}
Container
We can add a container with the Container
component.
For instance, we can write:
import React from "react";
import Container from "@material-ui/core/Container";
export default function App() {
return <Container maxWidth="sm">foo</Container>;
}
We can add a Container
component.
maxWidth
specifies the max-width of the container.
sm
means it’s a small container.
It can also have a fixed size:
import React from "react";
import Container from "@material-ui/core/Container";
export default function App() {
return <Container fixed>foo</Container>;
}
We made it fixed with the fixed
prop.
Grid
We can create our own grid with the Grid
component.
For instance,e we can use as follows:
import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Grid from "@material-ui/core/Grid";
import Paper from "@material-ui/core/Paper";
const useStyles = makeStyles(theme => ({
root: {
flexGrow: 1
},
paper: {
height: 140,
width: 200
},
control: {
padding: theme.spacing(2)
}
}));
export default function App() {
const [spacing] = React.useState(2);
const classes = useStyles();
return (
<Grid container className={classes.root} spacing={2}>
<Grid item xs={12}>
<Grid container justify="center" spacing={spacing}>
{[0, 1, 2].map(value => (
<Grid key={value} item>
<Paper className={classes.paper} />
</Grid>
))}
</Grid>
</Grid>
</Grid>
);
}
We have the Grid
components.
The outer one is used as a container.
We pass in a class that’s created by makeStyles
to it to set the flexbox to expand.
spacing
is set to 2 to give us a margin.
In the inner Grid
, we add the item
prop to indicate that it’s a grid item.
justify
lets us set the alignment according to the flexbox.
Then we add the Grid
to display some boxes inside the container.
Fluid Grids
We can make the grid fluid with some breakpoints:
import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Paper from "@material-ui/core/Paper";
import Grid from "@material-ui/core/Grid";
const useStyles = makeStyles(theme => ({
root: {
flexGrow: 1
},
paper: {
padding: theme.spacing(2),
textAlign: "center",
color: theme.palette.text.secondary
}
}));
export default function App() {
const classes = useStyles();
return (
<div className={classes.root}>
<Grid container spacing={3}>
<Grid item xs={12} sm={3}>
<Paper className={classes.paper}>foo</Paper>
</Grid>
<Grid item xs={12} sm={3}>
<Paper className={classes.paper}>bar</Paper>
</Grid>
<Grid item xs={12} sm={6}>
<Paper className={classes.paper}>baz</Paper>
</Grid>
</Grid>
</div>
);
}
We create a grid with the makeStyles
function to create the styles for our grid.
We have the root
class to make the grid fill the container.
Then we have some breakpoint props to let us set the width for each breakpoint.
xs
is extra small and it’ll set the column size for that screen size.
sm
is small and it’ll set the column size for that screen size and up.
Conclusion
We can create basic layouts with Material UI.
It’s can be fixed size or responsive.