✨Discover storytelling in the AI age with Pixar's Matthew Luhn at Sanity Connect, May 8th—register now

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.

Was this answer helpful?