app/src/layouts/Centered.js (view raw)
1import React from "react";
2import Container from "@material-ui/core/Container";
3import DefaultLayout from "./Default";
4import { makeStyles } from "@material-ui/core/styles";
5
6const useStyles = makeStyles((theme) => ({
7 layout: {
8 display: "flex",
9 alignItems: "center",
10 justifyContent: "center",
11 minHeight: "100vh",
12 },
13}));
14
15const CenteredLayout = ({ children }) => {
16 const classes = useStyles();
17
18 return (
19 <DefaultLayout>
20 <div className={classes.layout}>
21 <Container maxWidth="sm">{children}</Container>
22 </div>
23 </DefaultLayout>
24 );
25};
26
27export default CenteredLayout;