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

Question

我正在使用 gatsbyjs 构建一个博客，其中博客文章是 .md 文件并静态呈现为 HTML 页面。我已经设法设置了 title, date, and published 数据的样式，但是 --- 下的任何内容都是 times new roman。我到处都在寻找 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>
    )
}

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

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

How to style HTML elements passed into MDXRenderer?

html

javascript

gatsby