How to apply specific class to <Structured Text />


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';

      ({ 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