RichText / PrismicRichText component styling

[jorikvanruiswijk]

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

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:

• In the index.module.css, but that only targets 'a loose' PrismicRichText component. It does not get the .richtext class when it is rendered in a repeatable group.
  

  
  
  
  

• And like adding it the components, like so, but that also targets a 'loose' slice.
  `

  

• I tried using it like so <RichText field={item.plan_features} /> , but then it complains about the field having to be a slice. Having it rendered this way would give it the .richtext class and would solve the problem in my opinion.

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?

Thanks in advance!

[Phil (Phil Snow)]

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.

[jorikvanruiswijk]

Cheers @Phil , will take a look!