reactjs - MDXRenderer - 自动调整图像到容器
问题描述
我创建了一个简单的默认页面,该页面使用来自 GraphCMS 的内容(图像和文本)呈现。
我可以查询和显示内容,但我不确定如何使图像适应视图/容器,因为我不知道如何访问图像和设置 CSS 类。
我正在使用插件“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;
`
下面是我在浏览器中检查元素时的屏幕截图。看起来图像被包裹在一个段落中:
你能帮我理解如何为更小的视图/屏幕缩放图像吗?
解决方案
似乎我能够在 gatsby-browser.js 中定位图像并将其宽度设为 100%。
我的 gatsby-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>
)
任何其他或更好的建议/解决方案?
推荐阅读
- html - 在每次点击阅读更多按钮时显示接下来的两个 div
- .htaccess - .htaccess 静默(内部)转发包含问号和变量的 url
- java - ModelMapper LinkedHashMap 到 LinkedHashMap ArrayIndexOutOfBoundsException
- node.js - 导出的对象为空
- reactjs - 材质ui选择handleChange
- keras - keras模型输出形状中的方括号
- javascript - 在js中使用reduce返回Nan值
- c# - 如何在 C# WPF 中获取菜单栏、水平行按钮和数据网格
- asp.net-mvc - Html Encode 获得双重编码
- php - 处理您的请求时出错