Sanity with React BlockContent 仅显示纯文本

Question

好的，所以我正在为我的投资组合网站创建一个博客，直到我意识到当我在 Sanity Studio 中设置我博客 post 的 body 样式时，我才开始工作，这些样式不会转移到实际网站。我在网站上看到的都是纯文本。这可能是一个愚蠢的问题，但我不知道我做错了什么。

这是我的 SinglePost.js 文件：

import { useState, useEffect } from "react";
import { useParams, Link } from "react-router-dom";
import client from "../../client";
import BlockContent from "@sanity/block-content-to-react";
import Header from "../Header";

export default function SinglePost() {
    const [singlePost, setSinglePost] = useState([])
    const [isLoading, setIsLoading] = useState(true)
    const { slug } = useParams()

    useEffect(() => {
        client
          .fetch(
            `*[slug.current == "${slug}"] {
            title,
            body,
            mainImage {
              asset -> {
                _id,
                url
              },
              alt
            }
          }`
          )
          .then((data) => setSinglePost(data[0]))
        setIsLoading(false)
    }, [slug])

    const serializers = {
        types: {
          code: (props) => (
            <pre data-language={props.node.language}>
              <code>{props.node.code}</code>
            </pre>
          ),
        },
      }

    return (
        <div className = "bg-gray-100 dark:bg-zinc-900">
            <Header />
            {isLoading ? ( <h1>Loading...</h1> ) : (
                <section className = "p-5 pb-20 lg:mx-28 md:mx-16 sm:mx-8">
                    <h1 className = "title mb-20">{singlePost.title}</h1>
                    <div className = "flex items-center justify-center">
                        {singlePost.mainImage && singlePost.mainImage.asset && (
                            <img src = {singlePost.mainImage.asset.url} alt = {singlePost.title} title = {singlePost.title} className = "rounded-xl shadow-xl dark:shadow-gray-100/10" />
                            )}
                    </div>
                    <p className = "paragraph mt-5 mb-5">By Brandon Pyle</p>
                    <div className="">
                        <BlockContent serializers={serializers} blocks={singlePost.body} projectId="2hp9gld0" dataset="production" />
                    </div>
                    <button>
                        <Link to = "/blog" className = "button">Read more articles</Link>
                    </button>
                </section>
            )}
        </div>
    )
}

这是我的 blockContent.js 文件：

/**
 * This is the schema definition for the rich text fields used for
 * for this blog studio. When you import it in schemas.js it can be
 * reused in other parts of the studio with:
 *  {
 *    name: 'someName',
 *    title: 'Some title',
 *    type: 'blockContent'
 *  }
 */
export default {
  title: 'Block Content',
  name: 'blockContent',
  type: 'array',
  of: [
    {
      title: 'Block',
      type: 'block',
      // Styles let you set what your user can mark up blocks with. These
      // correspond with HTML tags, but you can set any title or value
      // you want and decide how you want to deal with it where you want to
      // use your content.
      styles: [
        {title: 'Normal', value: 'normal'},
        {title: 'H1', value: 'h1'},
        {title: 'H2', value: 'h2'},
        {title: 'H3', value: 'h3'},
        {title: 'H4', value: 'h4'},
        {title: 'Quote', value: 'blockquote'},
      ],
      lists: [{title: 'Bullet', value: 'bullet'}],
      // Marks let you mark up inline text in the block editor.
      marks: {
        // Decorators usually describe a single property – e.g. a typographic
        // preference or highlighting by editors.
        decorators: [
          {title: 'Strong', value: 'strong'},
          {title: 'Emphasis', value: 'em'},
          {title: 'Code', value: 'code'},
          {title: 'Highlight', value: 'highlight'},
        ],
        // Annotations can be any object structure – e.g. a link or a footnote.
        annotations: [
          {
            title: 'URL',
            name: 'link',
            type: 'object',
            fields: [
              {
                title: 'URL',
                name: 'href',
                type: 'url',
              },
            ],
          },
        ],
      },
    },
    // You can add additional types here. Note that you can't use
    // primitive types such as 'string' and 'number' in the same array
    // as a block type.
    {
      type: 'image',
      options: {hotspot: true},
    },
  ],
}

您可以在这里找到完整的源代码：https://github.com/bpyle02/portfolio 如果您想查看错误的实时示例，请查看此博客 post 我制作的博客旨在具有不同的标题、项目符号列表等：https://brandonpyle.netlify.app/blog/how-to-properly-write-a-github-readme

Answer 1

我能够找出导致问题的原因。因为我在这个项目中使用了 TailwindCSS，所以我必须安装 Tailwind Typography 插件才能使样式正确地用于块内容。

要安装此插件，请在控制台中键入 npm install -D @tailwindcss/typography，然后将 require('@tailwindcss/typography'), 添加到 tailwind.config.js 文件的插件部分。

然后将 'prose' class 添加到 BlockContent 标签周围的 div 中，如下所示：

<div className="prose">
    <BlockContent blocks = {singlePost.body} />
</div>

如果您需要更多帮助，请查看 Tailwind 文档中的本教程：https://tailwindcss.com/docs/typography-plugin

Sanity with React BlockContent 仅显示纯文本

Sanity with React BlockContent displays only plain text

javascript

reactjs

sanity