使用 Material-UI 的 ButtonBase 和 gatsby-background-image

Question

我正在尝试实现 Material-UI Complex Buttons 演示，但使用 gatsby-background-image 提供图像，但无论我尝试做什么，我都可以'似乎无法让图像正常进入，这是我迄今为止为替换 classes.imageSrc 跨度所做的最大努力：

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

编辑：这是一个工作 imageSrc 跨度的示例（填充 post.frontmatter.featuredImage.childImageSharp.fluid.src，绕过 gatsby 的图像加载）

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

这是我尝试输出的结果，其中图像未加载并留下灰色框：

<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>

Answer 1

我想通了！您必须通过在 BackgroundImage 的 style 道具中传递它或通过在 useStyles 中为 imageSrc 标记 !important 来强制 position: "absolute"

使用 Material-UI 的 ButtonBase 和 gatsby-background-image

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

reactjs

material-ui

background-image

gatsby