将Material-UI的ButtonBase与gatsby-background-image配合使用

npm install @material-ui/core
npm install gatsby-background-image

import React from "react";
import { ButtonBase } from "@material-ui/core";
import { graphql, useStaticQuery } from "gatsby";
import BackgroundImage from "gatsby-background-image";

const MyComponent = () => {
  const data = useStaticQuery(graphql`
    query {
      backgroundImage: file(relativePath: { eq: "background.jpg" }) {
        childImageSharp {
          fluid(maxWidth: 1200) {
            ...GatsbyImageSharpFluid
          }
        }
      }
    }
  `);

  const backgroundImage = data.backgroundImage.childImageSharp.fluid;

  return (
    <ButtonBase>
      <BackgroundImage fluid={backgroundImage}>
        <span>按钮文本</span>
      </BackgroundImage>
    </ButtonBase>
  );
};