この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
こんにちは。データアナリティクス事業本部 サービスソリューション部の北川です。
Chakra UIは、UIコンポーネントライブラリの一つです。ドキュメントも丁寧で使いやすく、人気のあるUIライブラリになります。
最近、Chakra UIのスタイリングをカスタマイズする方法について調べたので、今回は独自のブランドカラーを設定する方法について、記述していきます。
themeの適用
プロジェクトで、Chakra UIのインストールをします。
$ yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion
// または
$ npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
独自のブランドカラーを定義する際は、Chakra UIのextendTheme
に指定します。カラーの指定の他に、コンポーネントのスタイルを上書きする際もextendTheme内で記述します。
/theme/index.tsを作成します。
/theme/indexts
const brand = {
"50": "#fcfcfc",
"100": "#11a8ff",
"200": "#daf8a5",
"300": "#baeC75",
"400": "#99d950",
"500": "#6dc11f",
"600": "#54a516",
"700": "#3e8a0f",
"800": "#2b6f09",
"900": "#1d5c05",
};
export const theme = extendTheme(
{
colors: {
brand,
},
},
)
_app.tsxで、ChakraProviderにthemeを渡します。以下はNext.jsの_app.tsxに記述する例です。
_app.tsx
import "../styles/globals.css";
import type { AppProps } from "next/app";
import { ChakraProvider } from "@chakra-ui/react";
import { theme } from "../theme/index";
function MyApp({ Component, pageProps }: AppProps) {
return (
<ChakraProvider theme={theme}>
<Component {...pageProps} />
</ChakraProvider>
);
}
export default MyApp;
withDefaultColorScheme
コンポーネントのPropsに、デフォルトのカラースキーマが存在する場合
使用するコンポーネントのPropsにデフォルトのColorSchemeが存在する場合は、withDefaultColorScheme
を使用します。
withDefaultColorSchemeでは、使用するカラースキーマと、componentsに、適用させたいコンポーネントを配列の形で追記していきます。
export const theme = extendTheme(
{
colors: {
brand,
},
withDefaultColorScheme({
colorScheme: "brand",
components: ["Button", "table"],
})
);
コンポーネントのPropsに、デフォルトのカラースキーマが存在しない場合
デフォルトのカラースキーマが存在しない場合、extendTheme内でcomponents配下にスタイルを定義し、上書きしていきます。 通常、componentsはbaseStyle、size、variants、defaultPropsをキーとして持っています。
export const theme = extendTheme(
{
colors: {
brand,
},
components: {
Input: {
variants: {
outline: {
field: {
borderColor: 'brand.500',
_focusVisible: {
borderColor: 'brand.600',
},
_hover: { borderColor: 'brand.600' },
},
addon: {
bg: 'brand.50',
},
},
},
defaultProps: {
variant: 'outline',
},
},
},
);
一つ目のフォームはホバー時の色になります。
createMultiStyleConfigHelpers
マルチコンポーネントのスタイリング
複数のコンポーネントを組み合わせるMenuやTabsコンポーネントなどを、階層毎に個別にスタイリングする場合は、Chakra UIのヘルパーを使用します。
const helpers = createMultiStyleConfigHelpers(['menu', 'item', 'list'])
const Menu = helpers.defineMultiStyleConfig({
baseStyle: {
menu: {
colorScheme: 'brand',
defaultProps: {
colorScheme: 'brand',
},
},
item: {
_hover: {
bg: 'brand.100',
color: 'brand.500',
},
},
list: {
bg: 'brand.50',
},
},
variants: {
bold: {
item: {
fontWeight: 'bold',
},
menu: {
boxShadow: 'xl',
},
},
},
})
その後、定義した変数をextendThemeのcomponentsに指定します。
export const theme = extendTheme({
colors: {
brand,
},
components: {
Menu,
},
});
まとめ
今回は、Chakra UIでブランドテーマを適用する方法についてまとめました。Chakra UIのスタイリング方法は、他にも様々な方法があります。気になる方は調べてみてください。
ではまた。