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?
- I checked and tried out this article, regarding the
PrismicRichText
component. - I check and tried out this article regarding the serializer, but it became a mess.
- 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 aslice
. 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!