How do I render block children with custom containers?

[toddpadwick]

I have a sanity Block content field that contains:

• General text styling
• Gallery component
• banner component
• video component

I would like to wrap chunks of block text in a different container tag to the other components so that I can apply styling to it that doesn't effect the components. such as max widths, or wrapping in a box or similar.
How can I specify a container tag for specific children of the block serialiser?

[procrates]

Are you using portable text in the studio? If so create custom blocks and add a serializer in the frontend to render the blocks how you like.

Or create styles for the tags you like and create the serializer for that too. You can render a custom component for each style of block you add.

https://www.sanity.io/docs/portable-text-editor-configuration#dde2a7a4c661
https://www.sanity.io/docs/portable-text-editor-configuration#8997d6860827

[LucaArgentieri]

@toddpadwick something like this?

https://www.sanity.io/plugins/portabletext-vue

https://github.com/portabletext/vue-portabletext