Skip to content
Unlock seamless workflows and faster delivery with our latest releases - Join the deep dive
Get help on Slack

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...

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 
Normal
font style on the line below, the lines both render at the same size
Jan 31, 2021, 8:38 PM
Hi Brian! 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 
h1
and 
normal
? Are they within 
styles[]
?• 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 
p
and 
h1
tags as you’d expect, do you have any CSS resets that are removing the default styling on 
h1
elements?
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 
styles[]
(I just let it do its thing). I call it like this (with an import):

<BlockContent
  className="post__body"
  blocks={content}
  serializers={serializers}
  renderContainerOnSingleChild
/>

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

https://github.com/sanity-io/block-content-to-react#customizing-the-default-serializer-for-block-type
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

https://tailwindcss.com/docs/preflight
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.

Get started for freeExplore the demo

Was this answer helpful?