はてなブックマーク

グローバルなスタイルとは、アプリケーション全体を通して設定する共通のスタイルのことです。 例えば文字の色や背景色などです。 CSSフレームワークであるChakra-uiを使うと、すごく簡単にグローバルスタイルが設定できます。 /* Theme.tsx */ import { extendTheme } from "@chakra-ui/react"; export const theme = extendTheme({ styles: { global: { body: { backgroundColor: "gray.100", color: "gray.800" } } } }); chakra-uiには、extendThemeというものがあり、 その中で styles->global->bodyと階層を作り、最終的にbodyの中でグローバルなスタイルに適用したいCSSを記入します。