react material tailwind のコードを雰囲気で読んだ
概要
material tailwindというライブラリのソースコードを雰囲気で読んでみただけの記事です
参考
material tailwind
material tailwindはtailwindで作成されているmaterialなコンポーネントライブラリです。使い方の雰囲気は「MUI, ChakraUI」などの名だたるコンポーネントライブラリとさほど変わりません。違いとしてはcssライブラリにtailwindを使っており、propsにclassNameがあることからもカスタマイズしやすいという特徴があります。
<Button variant="outlined" className="mr-2">ボタン</Button>
という感じでclassNameをいれることができます。
material tailwindの使い所としては「MUI, ChakraUI」のようなユースケースとあまり変わらない気がします。ただし、material tailwindは機能をそこまで優先していないようにも思えるのでその部分を重視している場合は物足りないと思います。デザインを重視している場合はmaterial tailwindの方が使い勝手はいいかなと思います。
material tailwindのソースコードの登場人物
まず登場人物のディレクトリを確認します。
src
- components
- theme
- context
- types
- utils
この5つがメインです。概要をそれぞれ見ていきます
components
コンポーネントが記載されています。ButtonであればButtonというディレクトリがあります
theme
各コンポーネントで適用されるデザインが記載されています。2つのディレクトリが存在します
- base
- プロジェクト全体で適用されるtailwindの設定
- components
- 各コンポーネントのデザインの設定。ButtonであればButtonのデザインが格納されている
context
この役目は各プロジェクトで各コンポーネント内のデザインをカスタマイズできるような役目です。以下にコードだけ載せておくので雰囲気でそーなんだと思ってください。
# 各コンポーネントのデザイン設定を読み込む
const MaterialTailwindTheme = createContext(theme);
MaterialTailwindTheme.displayName = "MaterialTailwindThemeProvider";
function ThemeProvider({ value = theme, children }) {
# 利用者はThemeProviderをimportしてコンポーネントのbaseで付与されているcssを変更することができたりする
const mergedValue = merge(theme, value, { arrayMerge: combineMerge });
return (
<MaterialTailwindTheme.Provider value={mergedValue}>{children}</MaterialTailwindTheme.Provider>
);
}
const useTheme = () => useContext(MaterialTailwindTheme);
参考：https://www.material-tailwind.com/docs/react/theming
types
各コンポーネントのtypeが格納されているディレクトリです。
utils
各コンポーネントで汎用的に利用されるファイルが格納されています。
登場人物の流れ
ここで流れを確認します。
- ThemeProviderのcontextにてthemeディレクトリに格納されているデザインを読み込ます。
- 各コンポーネントで使うには、useThemeを使うことで各コンポーネントのデザインを取得します。
- 各コンポーネントのpropsに応じてデザインを適用させます。
- 適用にはutilsの汎用関数を使ってcssを展開して各コンポーネントの
classNameに読み込ませます。
という流れをコンセプトにしています。このコンセプトは別のコンポーネントライブラリでも同じようなやり方をとっていたりもします。例えばsmarthr-uiのreactコンポーネントライブラリも雰囲気は同じです。
↑のボタンのコンポーネントはおおかた同じ流れです。ロジックのスタイルとデフォルトのスタイルを2弾構えで用意しているのだと思いますが、最初にデザインを用意しておいてpropsに応じてどれを適用させるかを検討し内部のボタンラッパーというのに流しています。
まとめ
material tailwindのソースコードを雰囲気で読みました。気が向いたらmaterial tailwindの雰囲気を活かしつつButtonのコンポーネントの設計でもやってみたいと思います
Discussion