Header levels styling

[rawestmoreland]

Is there a way to change the styling on the different header level?

[lightningspirit]

Hi @rawestmoreland

There's no native way of doing that. If you're using Tailwind you can use the Typography Plugin to style your output - that's how we do it.

If not (or for some reason you can't use the plugin) you can replace the Header renderer and implement your own. For example:

function headerLevelClass(level: number) {
  switch (data?.level) {
    case 1: return "text-xl"
    case 2: return "text-lg"
    default: return "text-md"
  }
}

const Header: RenderFn<{
  text: string;
  level: number;
}> = ({
  data, className = ""
}) => {

  const props: {
    [s: string]: string;
  } = {};

  props.className = `${headerLevelClass(data?.level)} ${className}`

  const Tag = `h${data?.level || 1}` as keyof JSX.IntrinsicElements;
  return <Tag {...props}>{data?.text && HTMLReactParser(data.text)}</Tag>;
}

export default () => <Blocks data={dataFromEditor} renderers={{
  headers: Header
}} />