MDXRenderer - 自动调整图像到容器

Question

我创建了一个简单的默认页面，该页面使用来自 GraphCMS 的内容（图像和文本）呈现。

我可以查询和显示内容，但我不知道如何使图像适应 view/container，因为我不知道如何访问图像和设置 CSS class.

我正在使用插件“gatsby-plugin-mdx”来呈现以下内容： page.content.markdownNode.childMdx.body

这是我的 DefaultPage.tsx 文件：

import React from "react"
import Layout from "../layout/layout"
import styled from "styled-components"
import { H1, BodyMain } from "../styles/TextStyles"
import { MDXRenderer } from "gatsby-plugin-mdx"

export default function DefaultPageTemplate({ pageContext: { page } }) {
  return (
    <Layout>
      <Wrapper>
        <HeaderWrapper>
          <TextWrapper>
            <TitleWrapper>{page.title}</TitleWrapper>
            <SubtitleWrapper>{page.subtitle}</SubtitleWrapper>
          </TextWrapper>
        </HeaderWrapper>
        <ContentWrapper>
          <MDXRenderer>{page.content.markdownNode.childMdx.body}</MDXRenderer>
        </ContentWrapper>
      </Wrapper>
    </Layout>
  )
}
const Wrapper = styled.div``

const HeaderWrapper = styled.div`
  min-height: 300px;
  color: #ffffff;
  background-color: #339861;
  display: grid;
  justify-content: center;
  align-items: center;
  padding: 30px;
`

const TextWrapper = styled.div`
  text-align: center;
`

const TitleWrapper = styled(H1)``

const SubtitleWrapper = styled(BodyMain)``

const ContentWrapper = styled.div`
  margin: 1rem;
`

下面是该行为的屏幕截图：

下面是我在浏览器中检查元素时的屏幕截图。图像似乎被包裹在一段话中：

你能帮我理解如何将图像缩放为更小的图像吗views/screens？

Answer 1

看来我能够在 gatsby-browser.js 中定位图像并将其宽度设置为 100%。

我的盖茨比-browser.js 文件：

import "./src/components/layout/layout.css"
import React from "react"
import { MDXProvider } from "@mdx-js/react"

const H1 = props => (
  <h1 style={{ fontSize: "60px", fontWeight: "bold" }} {...props} />
)

const H2 = props => (
  <h2 style={{ fontSize: "40px", fontWeight: "bold" }} {...props} />
)

const H3 = props => (
  <h2 style={{ fontSize: "30px", fontWeight: "bold" }} {...props} />
)

const H4 = props => (
  <h4 style={{ fontSize: "25px", fontWeight: "bold" }} {...props} />
)

const H5 = props => (
  <h4 style={{ fontSize: "20px", fontWeight: "bold" }} {...props} />
)

const H6 = props => (
  <h4 style={{ fontSize: "18px", fontWeight: "bold" }} {...props} />
)

const MyParagraph = props => (
  <p style={{ fontSize: "20px", lineHeight: 1.6 }} {...props} />
)

const Strong = props => <strong style={{ fontWeight: "bold" }} {...props} />

const MyImage = props => (
  <img style={{ maxWidth: "100%", borderRadius: "15px" }} {...props} />
)

const components = {
  h1: H1,
  h2: H2,
  h3: H3,
  h4: H4,
  h5: H5,
  h6: H6,
  p: MyParagraph,
  strong: Strong,
  img: MyImage,
}

export const wrapRootElement = ({ element }) => (
  <MDXProvider components={components}>{element}</MDXProvider>
)

任何其他或更好的recommendations/solutions？

MDXRenderer - 自动调整图像到容器

MDXRenderer - Auto adjust image to container

reactjs

gatsby

mdxjs