How to apply specific class to <Structured Text />

🆘 Support
,
1

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…

2

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);
      },
    ),
  ]}
/>
2 Likes
3

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

1 Like
4

Piling on here, is there a way to add a class to all top-level nodes of a Structured Text element? One option would be to write a custom renderRule for each allowable node type (similar to the “Apply different formatting to top-level paragraphs” example here).

I’ve been trying to think of a more streamlined option but so far I haven’t figured it out. Does anybody have a suggestion? Thank you!