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: Get the most out of your content

Sanity.io is a platform to build websites and applications. It comes with great APIs that let you treat content like data. Give your team exactly what they need to edit and publish their content with the customizable Sanity Studio. Get real-time collaboration out of the box. Sanity.io comes with a hosted datastore for JSON documents, query languages like GROQ and GraphQL, CDNs, on-demand asset transformations, presentation agnostic rich text, plugins, and much more.

Don't compromise on developer experience. Join thousands of developers and trusted companies and power your content with Sanity.io. Free to get started, pay-as-you-go on all plans.