Structured Content 2022: Join our conference to explore fresh perspectives on content and digital experiences →

How can I override the container in PortableText? I want to use another element than <p>.

5 replies
Last updated: Jan 8, 2021

How can I override the container in PortableText? I want to use another element than <p>.

Jan 8, 2021, 11:11 AM

I added a serializer which overrides the block component

block: (props) => {
      return React.createElement('div', null, props.children);
    }

Jan 8, 2021, 11:22 AM

I added a serializer which overrides the block component

block: (props) => {
      return React.createElement('div', null, props.children);
    }

Jan 8, 2021, 11:22 AM

No, I copied the PortableText & serializers from a template and modified it to my needs.

Jan 8, 2021, 11:56 AM

Depends on the framework you use. There is a list here.

Jan 8, 2021, 12:16 PM

Sanity.io: Get the most out of your content

Sanity.io is a platform to build websites and applications. It comes with great APIs that let you treat content like data. Give your team exactly what they need to edit and publish their content with the customizable Sanity Studio. Get real-time collaboration out of the box. Sanity.io comes with a hosted datastore for JSON documents, query languages like GROQ and GraphQL, CDNs, on-demand asset transformations, presentation agnostic rich text, plugins, and much more.

Don't compromise on developer experience. Join thousands of developers and trusted companies and power your content with Sanity.io. Free to get started, pay-as-you-go on all plans.