Next.js 13中PortableText组件<p>元素样式添加失败求助

在Next.js 13项目中，我使用@portabletext/react的PortableText组件渲染Sanity中的富文本数据，但无法为生成的<p>元素添加自定义样式。我尝试了多种方案，包括创建自定义组件传入PortableText、在components配置中直接定义，但都没有效果。

以下是我的完整代码：

import { client} from "@/lib/sanity.client";
import { groq } from "next-sanity";
import { PortableText } from '@portabletext/react'
import Image from 'next/image'
import {urlFor} from '../../../../lib/urlFor' 

type Props = {
  params: {
      slug: any;
  };
};

async function Post({ params: {slug}}: Props){
  const query = groq` 
  *[_type=='post' && slug.current == $slug][0] 
  {
      title,
      ...,
      author->,
      categories[]{...}       
  }
  `

  const post: Post = await client.fetch(query, {slug})

  const myPortableTextComponents = {
      types: {
        image: ({ value }: { value: { url: string } }) => (
          <img src={urlFor(value).url()} />
        ),
      },
      marks: {},
      list: {
        bullet: ({ children }: { children: React.ReactNode }) => (
          <ul className="list-disc">{children}</ul>
        ),
        number: ({ children }: { children: React.ReactNode }) => (
          <ol className="list-decimal">{children}</ol>
        ),
      },
      block: {},
    };

  return (
      
      <section className="text-gray-600 body-font">
          <div className="container px-5 py-24 mx-auto flex flex-col">
              <div className="lg:w-4/6 mx-auto">
              {post.mainImage && (
                  <div className="rounded-lg h-64 overflow-hidden">
                      <Image  className="object-cover object-center h-full w-full" src={urlFor(post.mainImage).url()} height={500} width={1200}  alt={post.mainImage.asset._type}/>
                  </div>
              )};                
              <div className="flex flex-col sm:flex-row mt-10">
                  <div className="sm:w-1/3 text-center sm:pr-8 sm:py-8">
                  <div className="w-20 h-20 rounded-full inline-flex items-center justify-center bg-gray-200 text-gray-400">
                      <svg fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" className="w-10 h-10" viewBox="0 0 24 24">
                      <path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"></path>
                      <circle cx="12" cy="7" r="4"></circle>
                      </svg>
                  </div>
                  <div className="flex flex-col items-center text-center justify-center">
                      <h2 className="font-medium title-font mt-4 text-gray-900 text-lg capitalize">{post.author.name}</h2>
                      <div className="w-12 h-1 bg-indigo-500 rounded mt-2 mb-4"></div>
                      <p className="text-base">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos, ducimus.</p>
                      
                  </div>
                  </div>
                  <div className="sm:w-2/3 sm:pl-8 sm:py-8 sm:border-l border-gray-200 sm:border-t-0 border-t mt-4 pt-4 sm:mt-0 text-center sm:text-left">
                  <h2 className="font-medium title-font mt-4 mb-4 text-gray-900 text-lg capitalize text-center sm:text-left">{post.title}</h2>
                  <p className="leading-relaxed text-lg mb-4"></p>
                  <PortableText 
                      value={post.body}                        
                      components={myPortableTextComponents}/>

                  </div>
              </div>
              </div>
          </div>
      </section>
  )
}
export default Post 

尝试过的解决方案 #

1. 在types中定义paragraph组件 #

我尝试在types字段里添加paragraph组件，设置文字颜色为红色测试样式是否生效：

const myPortableTextComponents = {
    types: {
      paragraph: ({children, style}) => <p style={{...style, color: 'red'}}>{children}</p>,
    }, 
};

2. 在components配置中同时定义image和paragraph，以及尝试block配置 #

我也试过在完整的components配置里添加paragraph，并且尝试通过block字段来配置，但都没有效果：

const myPortableTextComponents = {
   types: {
      image: ({ value }: { value: { url: string } }) => (
         <img src={urlFor(value).url()} />
      ),
      paragraph: ({
        children,
        style,
      }: {
        children: React.ReactNode;
        style: React.CSSProperties;
      }) => (
        <p style={{ ...style, color: "red" }}>{children}</p>
      ),
    },
    marks: {},
    list: {
      bullet: ({ children }: { children: React.ReactNode }) => (
       <ul className="list-disc">{children}</ul>
      ),
      number: ({ children }: { children: React.ReactNode }) => (
        <ol className="list-decimal">{children}</ol>
      ),
    },
    block: {
      // p: ({ children }: { children: React.ReactNode }) => (
      //   <p className="text-base text-purple-500 m-4">{children}</p>
      // ),
    },
};

希望能得到有效的解决思路，帮我实现为PortableText生成的

元素添加自定义样式。

内容的提问来源于stack exchange，提问作者Mark Scholes