Gatsby×ブログ - 記事の一部にスタイルを適用する方法

Copycopy code to clipboard
1---
2/*** Frontmatter ***/
3---
4import { Box } from "theme-ui"
5
6<Box sx={{
7    "p": {
8        mb: 0,
9    },
10    "table": {
11        mt: 0,
12        "td": {
13            px: [0, "4px", "4px"],
14        },
15    },
16}}>
17
18/*** 内容 ***/
19
20</Box>

Copy@components/MDXRenderer.jsx: copy code to clipboard
1import * as React from "react"
2import { MDXProvider } from "@mdx-js/react"
3import { MDXRenderer } from "gatsby-plugin-mdx"
4import { Box } from "theme-ui"
5
6const style = {
7    MyBox: props => (
8        <Box sx={{
9            "p": {
10                mb: 0,
11            },
12            "table": {
13                mt: 0,
14                "td": {
15                    px: [0, "4px", "4px"],
16                },
17            },
18        }} {...props} />
19    ),
20}
21
22const MyMdx = (props) => {
23    return (
24        <MDXProvider components={style}>
25            <MDXRenderer>{props.children}</MDXRenderer>
26        </MDXProvider>
27    )
28}
29
30export default MyMdx

Copy@components/post.tsx: copy code to clipboard
1...
2//import { MDXRenderer } from "gatsby-plugin-mdx"   //削除
3import MDXRenderer from "@components/MDXRenderer"
4...

Copy投稿記事: copy code to clipboard
1//import は必要なし
2...
3<MyBox>
4/*** スタイルを適用する内容 ***/
5</MyBox>
6...