Uses and SVG and MUI styles to create a hexagon background

Hexagons.js

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

const hexagonColor = (_theme) => "#000";
const strokeColor = (theme) => theme.palette.background.default;

const useStyles = makeStyles((theme) => ({
  root: {
    "& svg": {
      background: hexagonColor(theme),
      minHeight: "100vh",
    },
    "& polygon": {
      fill: hexagonColor(theme),
      strokeWidth: 0.5,
      stroke: strokeColor(theme),
    },
  },
}));

export default function Hexagons() {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        xmlnsXlink="http://www.w3.org/1999/xlink"
        width="100%"
        height="100%"
      >
        <defs>
          <pattern
            id="hexagons"
            width="50"
            height="43.4"
            patternUnits="userSpaceOnUse"
            patternTransform="scale(5) translate(2) rotate(45)"
          >
            <polygon
              points="24.8,22 37.3,29.2 37.3,43.7 24.8,50.9 12.3,43.7 12.3,29.2"
              id="hex"
            />
            <use xlinkHref="#hex" x="25" />
            <use xlinkHref="#hex" x="-25" />
            <use xlinkHref="#hex" x="12.5" y="-21.7" />
            <use xlinkHref="#hex" x="-12.5" y="-21.7" />
          </pattern>
        </defs>
        <rect width="100%" height="100%" fill="url(#hexagons)" />
      </svg>
    </div>
  );
}