Skip to content
Watch a live product demo 👀 See how Sanity powers richer commerce experiences
Get help on SlackWatch Sanity demo

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

The Sanity Composable Content Cloud is the 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 startedWatch demo

Categorized in

Related answers

Get more help in the community Slack

TopicCategoriesFeaturedRepliesLast Updated
After adding the subtitle and running this code npm run graphql-deploy It does nothingSep 15, 2020
how to limit a reference to just one entry in Studio reference input side versus the default as-many-entries-as-you-fill-in-an-array...Sep 18, 2020
Is it possible to fetch more than one "_type" using GROQ?Nov 2, 2020
I want to add a view with the Structure builder (S.view.component) where I list similar documents based on the title. What...Sep 23, 2020
Is there a structure builder example where the format of each preview for the document list is modified?Feb 3, 2021
I have an array of references to a country schema type but it always just returns NULL values for meJan 30, 2021
Hi, I need help with a query for getting the url of an image asset. Here is what I've been trying, but I only get the _ref...Dec 1, 2020
Sanity UI looks brilliant :smiley: Is something like the current date picker possible at the moment? I’m not sure if anicon...Dec 21, 2020
Hey everyone. I have been coding and may have potentially accidentally deleted something. Does anyone know how to resolve...Dec 26, 2020
Hello everyone and happy new year :raised_hands::skin-tone-2:, I have a problem with outputting Portable Text :disappointed:...Jan 1, 2021

Related contributions

Clean Next.js + Sanity app
Template

Featured
Official

A clean example of Next.js with embedded Sanity ready for recomposition.

Cody Olsen

Blog with Built-in Content Editing
Template

Featured
Official

A Sanity-powered blog with built-in content editing and instant previews.