Sanity, Gatsby - Custom Block Style

Lead.js

import React from "react";

const Lead = ({ children }) => {
  return <p className="text-2xl text-gray-600">{children}</p>;
};

export default Lead;

serializers.js

import React from "react";
import Figure from "./Figure";
import Lead from "./Lead";

const serializers = {
  types: {
    authorReference: ({ node }) => <span>{node.author.name}</span>,
    mainImage: Figure,
    block: ({ node, children }) => {
      switch (node.style) {
        case "h1":
          return <h1>{children}</h1>;

        case "h2":
          return <h2>{children}</h2>;

        case "h3":
          return <h3>{children}</h3>;

        case "h4":
          return <h4>{children}</h4>;

        case "blockquote":
          return <blockquote>{children}</blockquote>;

        case "lead":
          return <Lead children={children} />;

        default:
          return <p>{children}</p>;
      }
    },
  },
};

export default serializers;