How to Style a Portable Text Component With '@PortableText'

8 replies

Last updated: Feb 22, 2022

Hello again everyone! I am trying to style a portable text component with '@portabletext/react' and I can't make any sense of the documentation...
I have my components defined like so.

const ptComponents = {
    block: {
      h1: ({ value }: any) =&gt; {
        return &lt;h1 className="whiteText"&gt;{value}&lt;/h1&gt;;
      },
      p: ({ value }: any) =&gt; {
        return &lt;p className="whiteText"&gt;{value}&lt;/p&gt;;
      },
    },
  };

And I am passing the components to the Portable Text Component here.

&lt;PortableText value={project.fulldesc} components={ptComponents} /&gt;

The styles are not being applied though. What am I doing wrong? I seriously can't make out how to do this:
https://github.com/portabletext/react-portabletext

Feb 21, 2022, 5:32 AM

user R

, in your code you pass value (that is an array of portable text blocks) to block which returns an error -

Objects are not valid as a React child

. If you pass

props

instead - your code should work.

Feb 21, 2022, 8:02 AM

const ptComponents = {
    block: {
      h1: ({ props }: any) =&gt; {
        return &lt;h1 className="whiteText"&gt;{props}&lt;/h1&gt;;
      },
      p: ({ props }: any) =&gt; {
        return &lt;p className="whiteText"&gt;{props}&lt;/p&gt;;
      },
    },
  };

Feb 21, 2022, 8:02 AM

Should be

({ children })

instead of

({ value })

, this should work:

const ptComponents = {
  block: {
    h1: ({ children }: any) =&gt; {
      return &lt;h1 className="whiteText"&gt;{children}&lt;/h1&gt;;
    },
    p: ({ children }: any) =&gt; {
      return &lt;p className="whiteText"&gt;{children}&lt;/p&gt;;
    },
  },
};

Feb 21, 2022, 1:18 PM

Okay, I have tried passing both props and children and neither of these are working either.

Feb 21, 2022, 5:27 PM

user R

, could you paste your blockContent schema. Are there’re elements with the

and

h1

values? 🙂

Feb 22, 2022, 7:32 AM

 export default {
  title: 'Block Content',
  name: 'blockContent',
  type: 'array',
  of: [
    {
      title: 'Block',
      type: 'block',
      styles: [
        { title: 'H1', value: 'h1'},
        { title: 'P', value: 'p'},
      ],
    }
  ],
};

Feb 22, 2022, 7:34 AM

Thank you all. My issue was that 'p' was not defined in my blockContent schema. It was defined as 'normal'. Everything is working as expected now!

Feb 22, 2022, 8:31 PM

Racheal, just to answer your question, the text would come through perfectly sized, but wouldn't apply my css coloring rules.

Feb 22, 2022, 8:53 PM

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 Watch demo

How to Style a Portable Text Component With '@PortableText'

Sanity.io – build remarkable experiences at scale

Categorized in