reactjs - Using Material-UI's ButtonBase with gatsby-background-image

Question

I'm trying to implement the Material-UI Complex Buttons demo but with gatsby-background-image providing the image but no matter what I try to do I can't seem to get the image to go in properly, this is my best effort so far for replacing the classes.imageSrc span:

<BackgroundImage
  Tag="span"
  className={classes.imageSrc}
  fluid={post.frontmatter.featuredImage.childImageSharp.fluid}
  backgroundColor={`#040e18`}
/>

Edit: Here's an example of a working imageSrc span (populated with post.frontmatter.featuredImage.childImageSharp.fluid.src, bypassing gatsby's image loading)

<span class="makeStyles-imageSrc-21" style="background-image: url(&quot;/static/8058f3f26913fea3b6a89a73344fe94a/14b42/salty_egg.jpg&quot;);"></span>

And here's what my attempt outputs where the images don't load leaving a gray box:

<span class="makeStyles-imageSrc-5 gbi--1866542702-sdWE3QALWtx7F9TPwtWxQm" style="background-position: 50% 40%; background-repeat: no-repeat; background-size: cover; position: relative; opacity: 0.99;">
    <style>
        .makeStyles-imageSrc-5.gbi--1866542702-sdWE3QALWtx7F9TPwtWxQm:before,
        .makeStyles-imageSrc-5.gbi--1866542702-sdWE3QALWtx7F9TPwtWxQm:after {
        content: '';
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-color: #040e18;
        transition: none;
        background-position: center 40%;
        background-repeat: no-repeat;
        background-size: cover;
        background-position-x: center;
        background-position-y: 40%;
        }
        .makeStyles-imageSrc-5.gbi--1866542702-sdWE3QALWtx7F9TPwtWxQm:before {
        z-index: -100;
        background-image: url('http://localhost:8000/static/8058f3f26913fea3b6a89a73344fe94a/14b42/salty_egg.jpg');
        background-image: url([REMOVED BASE64 IMAGE PREVIEW FOR SO]);
        opacity: 0; 
        }
        .makeStyles-imageSrc-5.gbi--1866542702-sdWE3QALWtx7F9TPwtWxQm:after {
        z-index: -101;
        background-image: url('http://localhost:8000/static/8058f3f26913fea3b6a89a73344fe94a/14b42/salty_egg.jpg');
        opacity: 1;
        }
    </style>
</span>

question from:https://stackoverflow.com/questions/65879481/using-material-uis-buttonbase-with-gatsby-background-image

Answer 1

I figured it out! You have to force position: "absolute" by either passing it in the style prop of the BackgroundImage or by marking it !important for imageSrc in useStyles