RichText / PrismicRichText component styling

Developing with Prismic
,
1

Describe your question/issue in detail

Add custom styling to RichText / PrismicRichText component in Prismic-Next.js app.

I want to be able to add styling to the elements rendered in the PrismicRichText component when it is used in Repeatable group, like so (Plan Features):

Screenshot 2024-11-22 at 10.36.36
Screenshot 2024-11-22 at 10.36.36719×624 27.1 KB

Screenshot 2024-11-22 at 10.43.43
Screenshot 2024-11-22 at 10.43.431091×362 71.7 KB

Rendering it like so:
<div><PrismicRichText field={item.plan_features} /></div>

So, e.g. in the above screenshot, I want to be able to globally style the p and ul tags in the div .

What steps have you taken to resolve this issue already?

  1. I checked and tried out this article, regarding the PrismicRichText component.
  2. I check and tried out this article regarding the serializer, but it became a mess.
  3. And I tried add styling like so:

But how do I pass the data, not being a slice with primary, into this component?

@Phil , you helped me greatly with my previous issue, could be that you are a master on this subject as well? :slight_smile:

Thanks in advance! :wave:

2

To style elements within the PrismicRichText component used in a repeatable group, you can use a custom serializer to add class names or wrap the content in styled containers. Here’s a step-by-step solution:

1. Add Custom Styling with a Serializer

The serializer allows you to customize how specific tags (p, ul, etc.) are rendered. You can use it to add classes for styling.

import { PrismicRichText } from '@prismicio/react';
import styles from './RichText.module.css'; *// Import your custom CSS module*

const customSerializer = {
  paragraph: ({ children }) => <p className={styles.paragraph}>{children}</p>,
  list: ({ children }) => <ul className={styles.list}>{children}</ul>,
  listItem: ({ children }) => <li className={styles.listItem}>{children}</li>,
};

const PlanFeature = ({ planFeatures }) => (
  <div className={styles.planFeaturesWrapper}>
    <PrismicRichText field={planFeatures} components={customSerializer} />
  </div>
);

export default PlanFeature;

2. Create a CSS Module for Styling

Create a RichText.module.css file to define your custom styles:

.planFeaturesWrapper {
  margin: 1rem 0;
}
.paragraph {
  color: #333;
  font-size: 1rem;
}
.list {
  padding-left: 1.5rem;
  list-style: disc;
}
.listItem {
    margin: 0.5rem 0;
}

3. Use the Component in Your Repeatable Group

Pass the repeatable group’s plan_features field to the PlanFeature component.

{slice.items.map((item, index) => (
  <PlanFeature key={index} planFeatures={item.plan_features} />
))}

4. (Optional) Ensure Styling Works Globally

If you prefer global styles (e.g., targeting all PrismicRichText in a group), apply a wrapper with a unique class and use standard CSS.

const PlanFeature = ({ planFeatures }) => (
  <div className="richtext-wrapper">
    <PrismicRichText field={planFeatures} />
  </div>
);

Then, in your global CSS or a scoped CSS file:

.richtext-wrapper p {
  color: #333;
  font-size: 1rem;
}

.richtext-wrapper ul {
  padding-left: 1.5rem;
  list-style: disc;
}

.richtext-wrapper li {
margin: 0.5rem 0;
}

5. Passing Data Correctly

If the field isn’t a slice (doesn’t include primary), ensure you’re passing the raw rich text data to PrismicRichText. For example:

<PrismicRichText field={item.plan_features} />

If item.plan_features is properly structured rich text, this should render without issues.

Tips

• Debugging Serializers: If a serializer becomes “messy,” isolate each element (e.g., p, ul) and test individually.
• Dynamic Class Names: Use dynamic classes for specific styles, if needed, by adding conditions in the serializer.
• Error with RichText:: RichText is a different Prismic component and has stricter requirements. Stick to PrismicRichText.

This approach ensures clean, maintainable styling for PrismicRichText within a repeatable group.

3

Cheers @Phil , will take a look! :+1: