如何使用 CSS 模块设置 React mdx 渲染元素的样式？

Question

我正在使用 React 构建博客，其中帖子文件为

.mdx

，我使用

gatsby-plugin-mdx

的

MDXRenderer

将它们呈现为 HTML。我正在使用

.module.scss

进行样式设置，但我无法在渲染的 HTML 中使用模块，有没有像参数或函数这样的方法？

import * as React from "react";
import { graphql } from "gatsby";
import { MDXRenderer } from "gatsby-plugin-mdx";
import Layout from "../../components/Layout";

interface DataType {
  mdx: {
    frontmatter: {
      title: string;
      date: string;
    };
    body: string;
  };
}

const BlogPost = ({ data }: { data: DataType }) => {
  return (
    <Layout pageTitle={data.mdx.frontmatter.title}>
      <p>{data.mdx.frontmatter.date}</p>
      <MDXRenderer>{data.mdx.body}</MDXRenderer>
    </Layout>
  );
};

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

export default BlogPost;

Answer 1

您可以使用 Components 属性在 MDXProvider 内部执行此操作（例如在布局组件中）。

import { myP } from './style/mdx.module.css';

<MDXProvider
  components={{
    p: props => <p {...props} style={myP} />,
  }}
/>

顺便说一句，如果您想要更精细的控制，您还可以将标签映射到 React 组件。