Chakra UI で共通のスタイルを適用するコンポーネントを作成する

基本的なスタイルの指定方法

ChakraUIでスタイルを適用するときには基本的に下記のような指定方法になると思います。

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

export const Footer: VFC = () => {
  return (
    <Box
      as="footer"
      borderTop="1px solid"
      borderColor="gray.600"
      color="gray.400"
      textAlign="center"
      py={4}
    >
      &copy; 2022 by niihara megumu.
    </Box>
  );
};

Footerみたいにあまり使い回す必要性がなく、独立してスタイルを適用する場合はこれで良いのではないかと思います！
ただ、各ページのH1見出しやSection部分の下のmarginやpaddingなどページを通して共通化させておきたい箇所もあるかと思います。

共通スタイルを持つコンポーネント群を作成する

import { VFC } from "react";
import { Heading, HeadingProps } from "@chakra-ui/react";

export const HeadH2: VFC<HeadingProps> = (props) => {
  const { children } = props;
  return (
    <Heading
      as="h2"
      textTransform="uppercase"
      fontSize="4xl"
      pb={{ base: 2, md: 4 }}
      {...props}
    >
      {children}
    </Heading>
  );
};

このように共通化したコンポーネントをCommonStyle.tsxなど自身で作成します。
childrenで渡しているので共通スタイルとして使い回す事ができます。
global.css → CommonStyle.tsxになった感じです。