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


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} />

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.


"subtitle": {
          "type": "StructuredText",
          "config": {
            "label": "subtitle",
            "placeholder": "",
            "allowTargetBlank": true,
            "single": "paragraph,strong",
            "labels": [

Am I doing something wrongly here?


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:

    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:


Or classes with multiples words: