我正在尝试将样式添加到
我已经尝试了我能在网上找到的每一种方法，包括创建一个自定义组件并将其传递给PortableText元素，将该组件直接添加到PortableText元素。

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

我尝试了以下方法。使用下面所示的方法在段落的类型中创建组件。

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

我使用了将字体颜色更改为红色作为示例，以查看哪种方法应用了该样式。
我还尝试将这些选项直接应用于PortableText元素。

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>
   // ),
 },
};

正如你所看到的，我也试过通过阻挡选项来瞄准它，但也没有成功。
任何想法都将受到欢迎。