Как передать className компоненту изображения в Гэтсби

Question

Я использую gatsby-image и gatsby-source-filesytem. Я хочу, чтобы тег img (компонент Logo) при рендеринге в формате html имел className из logo как мне это сделать, документы gatsby-imageскажем, чтобы пропустить это через реквизит.Я до сих пор не совсем понимаю реакцию, поэтому нужна помощь, чтобы понять, вот мой код.

logo.js

import React from "react"
import { StaticQuery, graphql } from "gatsby"
import Img from "gatsby-image"

/*
 * This component is built using `gatsby-image` to automatically serve optimized
 * images with lazy loading and reduced file sizes. The image is loaded using a
 * `StaticQuery`, which allows us to load the image from directly within this
 * component, rather than having to pass the image data down from pages.
 *
 * For more information, see the docs:
 * - `gatsby-image`: https://gatsby.app/gatsby-image
 * - `StaticQuery`: https://gatsby.app/staticquery
 */

const Image = () => (
  <StaticQuery
    query={graphql`
      query {
        placeholderImage: file(relativePath: { eq: "riel-type.png" }) {
          childImageSharp {
            fluid(maxWidth: 300) {
              ...GatsbyImageSharpFluid
            }
          }
        }
      }
    `}
    render={data => <Img fluid={data.placeholderImage.childImageSharp.fluid} />}
  />
)
export default Image

index.js

import React from "react"
import { Link } from "gatsby"

import Layout from "../components/layout"
import Image from "../components/image"
import Logo from "../components/logo"
import SEO from "../components/seo"

const IndexPage = () => (
  <Layout>
    <SEO title="Home" keywords={[`gatsby`, `application`, `react`]} />
    <div className="row">
      <div className="col-4">
        <Logo />
      </div>
    </div>
  </Layout>
)

export default IndexPage

Answer 1

Документы gatsby-image говорят, что пропускают его через реквизиты

Означает, что вы можете добавить любое свойство, которое хотите, внутри тега Img.Из-за некоторых внутренних ограничений вы должны использовать атрибут имени JavaScript, а не HTML (т. Е. className вместо class)

Итак:

render={data => <Img fluid={data.placeholderImage.childImageSharp.fluid} className="logo" />}