将 CSS 类传递到 sanity block-content root

Question

设想以下情况：

我从 sanity CMS 中检索富文本作为块内容。块内容包含单个块，例如 <h2>Hello World</h2>。这个 HTML 是 <Blockcontent block={someBlockContent}/> 使用 @sanity/block-content-to-react.

的结果

我的问题：

有没有办法将 CSS-class 传递到渲染的 H2 元素中？所以它会像 <h2 class="title">Hello World</h2> 一样呈现？我看到了属性 className 和 renderContainerOnSingleChild，但它们会向此 H2 元素添加一个父元素。但是我想添加一个 CSS class 而不添加父 DOM.

谢谢！

Answer 1

您可以将覆盖列表传递给 serializers 道具。对于像 H2 这样的东西，它是数组中 block 类型的一部分，你可以这样做：

import BlockContent from "@sanity/block-content-to-react"

const overrides = {
  h2: props => <h2 className="title" {...props} />,
}

const serializers = {
  types: {
    block: props =>
      // Check if we have an override for the “style”
      overrides[props.node.style] 
        // if so, call the function and pass in the children, ignoring
        // the other unnecessary props
        ? overrides[props.node.style]({ children: props.children })

        // otherwise, fallback to the provided default with all props
        : BlockContent.defaultSerializers.types.block(props),
  }
}

const SomeComponent = () => 
  <BlockContent blocks={...} serializers={serializers} />

编辑：自回答这个问题以来，我编写并发布了一个名为 react-portable-text 的库，以便更轻松地在 React 中处理 Sanity 的块内容。这是上面使用 react-portable-text 代替：

import PortableText from "react-portable-text"

const SomeComponent () => 
  <PortableText content={blockContent} serializers={{ h2: Heading }} />

const Heading = ({ children }) => 
  <h2 className="title">{children}</h2>

将 CSS 类传递到 sanity block-content root

Passing CSS classes into sanity block-content root

gatsby

sanity

将 CSS 类 传递到 sanity block-content root

Passing CSS classes into sanity block-content root

gatsby

sanity

将 CSS 类传递到 sanity block-content root