Next.js + ChakraUIでmicroCMSで取得した記事のHTMLを装飾する

Next.js + ChakraUI + microCMSでこのブログを書いています。
ChakraUIでの装飾を行うには、ChakraUIが用意するコンポーネントを使用する必要があります。
外部から取得した生のHTML記述を装飾するには、要素を指定してstyled componentsを提要するしかないのか...と迷っていました。

せっかく...ChakraUIだけの管理を目指していたのに...と。
ただ、さすがはChakraUIです。内部のHTMLにスタイルを適応する方法が用意されていました。

実際のサンプル

import { memo, VFC } from "react";
import { Box } from "@chakra-ui/react";


type Props = {
  body: string;
};


// eslint-disable-next-line react/display-name
const BlogDetailBody: VFC<Props> = memo((props) => {
  const { body } = props;
  const color = "gray.900";
  return (
    <Box
      mt={4}
      sx={{
        "*": {
          mb: 4,
          listStyle: "none",
        },
        h1: { fontSize: "3xl", fontWeight: "bold", color: color },
        p: { fontSize: "md", color: color },
        blockquote: {
          borderLeft: "3px solid",
          borderColor: "gray.500",
          pl: 4,
        },
        a: {
          fontWeight: "bold",
          color: color,
        },
        li: {
          mb: 2,
          color: color,
        },
        "pre code": {
          borderRadius: 10,
        },
        img: {
          w: "100%",
          h: { base: 200, sm: 300, md: 400 },
          objectFit: "cover",
          borderRadius: 10,
        },
      }}
    >
      <div dangerouslySetInnerHTML={{ __html: body }}></div>
    </Box>
  );
});
export default BlogDetailBody;

このように、ChakraUIのコンポーネントに【sx={}】を指定するだけで内包するHTMLのスタイルを適用することができます。
サンプルのようにcomponent化しておけばパーツとして使い回せますし便利です。
ChakraUIのメリットとも言えるCSSとHTMLを分けずに考える思想を使うことができるので、管理も楽になります。