将样式信息添加到 GraphQL 的结果中答案

【问题标题】：Adding styling information to results from GraphQL将样式信息添加到 GraphQL 的结果中
【发布时间】：2019-12-20 06:05:29
【问题描述】：

以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 类。这会给我这样的描述：

这是我写我的t̜͔̰͎̣̙͔̏̾ͩ̅̂h̹͔̜͆̆̒ͩu̜̠͎̜ͮͯu͗̍̓҉̻̬̼̥͉̖g̘̻̱̙͠ͅͅh̦̘͈̺̯̽ͮ̓͑͆ͧ͞t̹̫̜̲͎̝ͨͣ̈́͢s͖ͯͥͣ。

我怎样才能做到这一点？

【问题讨论】：

标签： javascript graphql gatsby

【解决方案1】：

你可以只发送标准的 html

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

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

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

【讨论】：

@KenY-N 如果您正在呈现用户输入，这只是 XSS 风险。如果您正在渲染您自己生成的内容（博客等），那很好。

【解决方案2】：

为什么不能使用StaticQuery？在它的渲染中，你将能够像普通 React 一样应用任何样式

【讨论】：