Hello,
I am new to Prismic. I have looked the documentation about modelling template, but I am not able to add a className to a specific PrismicRichText:
<PrismicRichText field={slice.primary.subtitle} className="subtitle" />
Is there a way around?
The only way that I have found it's to create kind of a "RichText" React component which will return the PrismicRichText within a div which would have the desired className.
Although that does not satisfy my need as I need to add the className specifically to the element itself.
field && (
<div className={className}>
<PrismicRichText field={field} />
</div>
Thanks in advance for your hlep!
Hello Kris,
Thank you for your reply.
I have seen this documentation, I have tried to add some labels, I can select it in the content editor, but the selected label is not apply nor visible in front in the HTML.
Example:
"subtitle": {
"type": "StructuredText",
"config": {
"label": "subtitle",
"placeholder": "",
"allowTargetBlank": true,
"single": "paragraph,strong",
"labels": [
"right-align",
"center-align",
"subtitle",
"`${classes.title}`"
]
}
Am I doing something wrongly here?
Best
After multiples iterations, I have been able to add in labels classes coming from global.css or adding them with providing a list of component overrides to the components prop:
<PrismicRichText
field={document.data.example_rich_text}
components={{
heading1: ({ children }) => <Heading>{children}</Heading>,
paragraph: ({ children }) => <p className="paragraph">{children}</p>,
}}
/>
However, I have not been able to add classes coming from module.css through the JSON/labels.
Is it even possible already in Prismic? I have tried multiples way of writing it but it's not working.
As a reminder with module.css, whenever I add a class I need to write it this way:
className={classes.title}
Or classes with multiples words:
className={classes["box-paragraph"]}
Best,
1 Like