Apply specific CSS class to an element (rich text field)

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