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

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):

&lt;BlockContent
  className="post__body"
  blocks={content}
  serializers={serializers}
  renderContainerOnSingleChild
/&gt;

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.io – build remarkable experiences at scale

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

Get Started Join our 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...

Sanity.io – build remarkable experiences at scale

Categorized in