向GraphQL的结果中添加样式信息

Question

例如，在this page上，我们有一个这样的例子：

gatsby-config.js

module.exports = {
  siteMetadata: {
    title: "My Homepage",
    description: "This is where I write my thoughts.",
  },
}

src / pages / index.js

import React from 'react'
import { graphql } from 'gatsby'

  const HomePage = ({data}) => {
  return (
    <div>
      {data.site.siteMetadata.description}
    </div>
  )
}
export const query = graphql`
  query HomePageQuery {
    site {
      siteMetadata {
        description
      }
    }
  }
`
export default HomePage

我了解发生了什么，但是如果我想为description设置样式怎么办？ This tutorial讨论了如何添加Markdown转换器，但是我想使用类似React的样式，所以我的description可能在理想的世界中：

description: "This is where I write my <span className={style.zalgo}>thoughts</span>.",

src/pages/index.module.css根据Gatsby约定定义.zalgo类。这将给我一个类似的描述：

[这是我写我̜͔̰͎̣̙͔̏̾ͩ̅̂的地方。

我该如何实现？

Answer 1

您可以发送标准html

This is where I write my <span class={style.zalgo}>thoughts</span>.

然后使用dangerouslySetInnerHTML设置页面上元素的内容。

<div dangerouslySetInnerHTML={{ __html: data.site.siteMetadata.description }} />