Skip to content
Get help on SlackWatch Sanity demo

Customize the container of portable text with React

Featured topic
7 replies
Last updated: Jan 25, 2021
Hi all! Does anyone know how to remove/customize the container of portable text with React? The react renderer currently wraps the content inside 
<p>
, but I’d like to change that. I tried a few things including:

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

//                                            vvvvvvvvv
<BlockContent blocks={content} serializers={{ container: 'span' }} />
…but still no dice.
Jan 25, 2021, 9:50 AM
container: ({ children }) => children
Jan 25, 2021, 10:48 AM
Thanks
Paul Welsh
, that didn’t work for me :< Here’s my data + what my code looks like if you’re interested: https://codesandbox.io/s/pedantic-snyder-ftjlp?file=/src/App.js
Jan 25, 2021, 11:08 AM
ah, that’s the default block serialization, not the container you need to be looking at
Jan 25, 2021, 11:25 AM
Thanks Paul, I’ve just realized that as well! I guess now I’ll have to learn how to configure the default block
Jan 25, 2021, 11:29 AM
const serializers = {
  types: {
    block: ({children}) => <>{children}</>
  }
}
Jan 25, 2021, 11:31 AM
sweet, that works! Thanks a ton
Paul Welsh
Jan 25, 2021, 11:31 AM
☝️ obviously very specific to your use case
Jan 25, 2021, 11:32 AM

Sanity– build remarkable experiences at scale

The Sanity Composable Content Cloud is the headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Get startedWatch demo

Was this answer helpful?