はじめに
Reactに入門する際、CSSライブラリとしてChakra UIを選びました。
Chakra UIは色指定にはカラーコードではなく、デフォルトで定義されているblueのような識別子を使います（カラーコードも使えます）。
限られた色を使うことで、シンプルで一貫性を保つことを方針にしているみたいです1
しかしながらどうしても定義済みの色以外を使いたくなったので、その方法を調べてわかったことを書きたいと思います。
濃さも定義済みのものしか使えない
色の濃さはblue.100のように数字で指定するのですが、blue.50とblue.100の中間の濃さを使いたいと思い、blue.75としてみましたが反映されませんでした。
色の定義はnode_modules/@chakra-ui/theme/dist/foundations/colors.jsに記載があるとのことで確認してみると、やはり75は定義されていませんでした。
var colors = {
// ...
blue: {
50: "#ebf8ff",
100: "#bee3f8",
200: "#90cdf4",
300: "#63b3ed",
// ...
},
// ...
};
このような、色などを管理するための設定値の集まりを、テーマと呼ぶそうです。
新たな色をテーマに追加する
それであればしょうがないので中間の濃さのカラーコードを直接指定しようと思いましたが、それだとChakra UIの方針に反しそうな気がしたので、テーマに色を追加する方法を取りました。
テーマの拡張にはextendTheme()を使います。
import { extendTheme } from "@chakra-ui/react"
const theme = extendTheme({
colors: {
blue: {
75: "#d4e8ff"
},
},
});
export default theme;
次のように<ChakraProvider theme={theme}>として適用します。
// ...
import { ChakraProvider } from '@chakra-ui/react';
import theme from './theme';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<ChakraProvider theme={theme}>
<App />
</ChakraProvider>
</React.StrictMode>
);
// ...
これで新しく定義したblue.75が使えるようになります。
テーマの適用範囲をコンポーネント単位で分けることもできます。
テーマの色をカラーコードで取得する
テーマはChakra UIのプロパティで使用しますが、通常のCSSプロパティにテーマを指定することはできません。
例えば<Box style={{backgroundColor: "blue.100"}}>のようにインラインスタイルでblue.100を指定しても反映されません。
テーマと同じ色を使いたいときは、テーマオブジェクトから対応するカラーコードを取得します。
Chakra UIにはテーマオブジェクトを取得するuseTheme()というフックが用意されているので、それを使います。
import { Box, useTheme } from "@chakra-ui/react";
const MyComponent = () {
const theme = useTheme();
return (
<Box style={{ backgroundColor: theme.colors.blue[100] }}>
// ...
</Box>
);
};
theme.colors.blue[100]とすると文字列#bee3f8を取得できます。
おわりに
他のCSSライブラリとの比較はできませんが、Chakra UIは自然な形でReactに組み込めている感覚があり、使いやすかったです。MUI等も似たような感じなのでしょうか？おいおい使ってみたいと思います。