Text blocks rendering at same size in block-content-to-react

I can help you with this! The issue you're experiencing is likely because block-content-to-react (which is now deprecated) needs custom serializers to properly render different block styles like headings versus normal paragraphs.

First, I should mention that if you're still using block-content-to-react, you should migrate to @portabletext/react - it's the modern, officially supported library for rendering Portable Text in React.

The reason your headings and normal text are rendering at the same size is that you need to define custom components (serializers) for different block styles. Here's how to fix it:

import {PortableText} from '@portabletext/react'

const components = {
  block: {
    // Define different styles for block types
    h1: ({children}) => <h1 className="text-4xl font-bold">{children}</h1>,
    h2: ({children}) => <h2 className="text-3xl font-bold">{children}</h2>,
    h3: ({children}) => <h3 className="text-2xl font-bold">{children}</h3>,
    normal: ({children}) => <p className="text-base">{children}</p>,
  },
}

// Then use it in your component
<PortableText value={yourContent} components={components} />

The key insight is that Portable Text stores different block styles (h1, h2, normal, etc.) as different block types in the JSON, but without custom serializers, they all get rendered as plain elements without proper styling. You need to explicitly tell the renderer how to display each style.

If you're using Tailwind, you can also leverage @tailwindcss/typography for automatic styling:

<article className="prose">
  <PortableText value={yourContent} />
</article>

The prose class will automatically apply appropriate sizing and spacing to headings, paragraphs, and other text elements.

For a comprehensive guide on customizing Portable Text rendering, check out this guide on customizing Portable Text from schema to React component. It covers everything from schema setup to custom React components for rendering.