@forrestjs/kitchensink/fe-react/src/components/PageItem/PageItem.js

ForrestJS demonstrational tool

import React from 'react';
import clsx from 'clsx';
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) => ({
  paper: {
    padding: theme.spacing(2),
    display: 'flex',
    overflow: 'auto',
    flexDirection: 'column',
  },
  fixedHeight: {
    height: 240,
  },
}));

export const PageItem = ({ children, ...props }) => {
  const classes = useStyles();
  const fixedHeightPaper = clsx(classes.paper, classes.fixedHeight);

  return (
    <Grid item {...props}>
      <Paper className={fixedHeightPaper}>{children}</Paper>
    </Grid>
  );
};

PageItem.defaultProps = {
  xs: 12,
  md: 12,
  lg: 12,
};