如何为传递给 MDXRenderer 的 HTML 元素设置样式？答案

【问题标题】：How to style HTML elements passed into MDXRenderer?如何为传递给 MDXRenderer 的 HTML 元素设置样式？
【发布时间】：2021-04-21 00:04:13
【问题描述】：

我正在使用 gatsbyjs 构建一个博客，其中博客帖子是 .md 文件，并且静态呈现为 HTML 页面。我已经成功地设置了title, date, and published 数据的样式，但是--- 下的任何内容都是新罗马的。我到处寻找 MDXRenderer 的内联样式标签，但没有运气。这是否受支持，如果不支持，我如何设置我的正文内容？谢谢！

index.md

---
title: Third Post!
date: 2020-09-10
published: true
---

This is my third post!

How my achievements mock me! -William Shakespeare

index.md

import { graphql } from 'gatsby'
import { MDXRenderer } from 'gatsby-plugin-mdx'
import React from 'react'
import styled from "styled-components"
import Navbar from "../components/Navbar.js"

const Body = styled.body`
    width: 100%;
    background-color: #DBDCE0;
    height: 100%;
`

const Heading1 = styled.h1`
    font-family: Arial;
`

const Paragraph = styled.p`
    font-family: Arial;
`

const ApplyButton = styled.button`
    background-color: #EC1B2F; 
    border: none;
    color: white;
    padding: 10px 40px;
    text-align:center;
    text-decoration: none;
    font-size: 16px;
    border-radius: 10px;
`

export const query = graphql`
    query PostsByID($id: String!) {
        mdx(
            id: { eq: $id }
        ){
            body
            frontmatter {
                title
                date(formatString: "YYYY MMMM DD")
            }
        }
    }
`

export default ({ data }) => {
    const { frontmatter, body } = data.mdx
    return (
        <Body>
        <div>
            <Navbar/>
            <Heading1>{frontmatter.title}</Heading1>
            <Paragraph>{frontmatter.date}</Paragraph>
            <MDXRenderer>{body}</MDXRenderer>
            <ApplyButton>Apply</ApplyButton>
        </div>
        </Body>
    )
}

【问题讨论】：

标签： javascript html gatsby

【解决方案1】：

一种方法是在MDXRenderer 周围添加一个包装器。

这是一个使用样式组件的示例：

const MarkdownWrapper = styled.div`
  p {
    margin: 1.5rem 0;
  }
  a {
    color: ${(props) => props.theme.black};
    text-decoration: underline;
  }
  a:hover {
    color: ${(props) => props.theme.black};
  }
 …
`;

…

<MarkdownWrapper>
  <MDXRenderer>{body}</MDXRenderer>
</MarkdownWrapper>

【讨论】：