How to apply specific class to <Structured Text />

Hi!

I’d like to be able to add specific (tailwind) class on my H1 headings. How can I do?
GitHub - datocms/react-datocms: A set of components and utilities to work faster with DatoCMS in React environments is unclear on the matter to me…

You can add a custom rule for that! This should work:

import { renderRule, isHeading } from 'datocms-structured-text-utils';

<StructuredText
  data={data.blogPost.content}
  customRules={[
    renderRule(
      isHeading,
      ({ node, adapter: { renderNode }, children, key }) => {
        return renderNode(`h${node.level}`, { key, className: node.level === 1 ? 'TAILWIND' : null }, children);
      },
    ),
  ]}
/>
1 Like

Works like a charm… just add the curly braces to the customRules.
Thanks. Would be worth being documented as a “recipe” imho.

1 Like