Stack component, vertically flex components

Stack.tsx

import * as React from "react";
import { makeStyles } from "@material-ui/core/styles";

interface StackProps
  extends React.DetailedHTMLProps<
    React.HTMLAttributes<HTMLDivElement>,
    HTMLDivElement
  > {
  gap?: number;
  reverse?: boolean;
}

const useStyles = makeStyles((theme) => ({
  root: ({ gap, reverse }: { gap: number; reverse: boolean }) => {
    const attribute = reverse ? "marginTop" : "marginBottom";
    const direction = reverse ? "column-reverse" : "column";

    return {
      display: "flex",
      flexDirection: direction,
      "& > *": {
        [attribute]: theme.spacing(gap)
      },
      "& > *:last-child": {
        [attribute]: 0
      }
    };
  }
}));

const Stack: React.FC<StackProps> = ({
  gap = 1,
  reverse = false,
  children,
  ...other
}) => {
  const classes = useStyles({ gap, reverse });
  return (
    <div className={classes.root} {...other}>
      {children}
    </div>
  );
};

export default Stack;