如何使用CSS模块对mdx呈现的元素进行样式处理？

Question

我正在构建带有function的博客，其中post文件是.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} />,
  }}
>

​

顺便说一句，如果您想要更好的控制，您也可以映射标记来响应组件。