Join live – Get insights, tips, + Q&A from Sanity developers on our latest releases

Issue with text blocks not rendering properly in block-content-to-react

8 replies
Last updated: Feb 1, 2021
Hi again, I'm currently working on my blog and realized that the text blocks aren't rendering properly in block-content-to-react. For example, when I have a
Heading 1
font style and a
font style on the line below, the lines both render at the same size
Jan 31, 2021, 8:38 PM
Hi User! As you alluded to in your following comment, the default serializer should handle the h# and p (“normal”) styles. A few things I’d check are:
• In your portable text schema, are you passing those values as
? Are they within
?• Do you have a serializer file and is it possibly overriding your normal or h1 styles?
• What is the HTML that’s being output? If you’re getting
tags as you’d expect, do you have any CSS resets that are removing the default styling on
Feb 1, 2021, 2:04 AM
On the off chance it helps, this is the start of my portableText schema in my sanity folder:

export default {
  name: "content",
  title: "Content",
  type: "array",
  of: [
      type: "block",
      styles: [
        { title: "Normal", value: "normal" },
        { title: "H1", value: "h1" },
        { title: "H2", value: "h2" },
        { title: "H3", value: "h3" },
        { title: "H4", value: "h4" },
        { title: "Quote", value: "blockquote" },
      // More stuff
Then on the front end, my serializers file makes no reference to
(I just let it do its thing). I call it like this (with an import):


Feb 1, 2021, 2:19 AM
I just checked my schema and that is present. After playing around with the readme in block-content-to-react, this solved my issue
Feb 1, 2021, 2:47 AM
I tested the bold, italics, strikethrough and code lines and they work without specifications
Feb 1, 2021, 2:47 AM
I do have custom serializers for image and code, but I don't believe that would affect the default serializers
Feb 1, 2021, 2:48 AM
For example,
Feb 1, 2021, 2:50 AM
I'm also using tailwind css in conjunction with sanity
Feb 1, 2021, 2:52 AM
Ahhh found it
Turns out tailwind does this by default
Feb 1, 2021, 2:55 AM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?

Categorized in