Customize the container of portable text with React

Looking at your question, you're trying to customize the container element that wraps Portable Text content. The issue is that you're using the older @sanity/block-content-to-react library, which has been deprecated in favor of the modern @portabletext/react package.

With the old library, the container prop doesn't work the way you're trying to use it. Instead, you need to add this to your serializers:

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

const serializers = {
  container: ({children}) => children
}

<BlockContent blocks={content} serializers={serializers} />

This removes the default <div> wrapper entirely by just returning the children directly.

However, I'd strongly recommend migrating to the modern @portabletext/react package, which gives you much better control. Here's how you'd handle this with the new library:

import {PortableText} from '@portabletext/react'

// If you want to customize block-level elements:
const components = {
  block: {
    normal: ({children}) => <span>{children}</span>, // or any element you want
  }
}

<PortableText value={content} components={components} />

The new library has a cleaner API where you define custom components for different element types under block, marks, types, and list categories. The main changes in the migration are that the node prop is now called value, and component definitions are better organized. Check out the migration guide for details.

If you're using Tailwind's Typography plugin and need to mix prose-styled blocks with custom components, you might also find this guide on combining Tailwind Typography with Portable Text helpful—it shows a clever pattern for grouping content types to avoid CSS inheritance issues with the .prose class.