チームで Material-UI コンポーネントのスタイルカスタマイズをする時のコーディングルールを考えてみた
こんにちは、Gaji-Labo 横田です。
React 用 UIコンポーネントライブラリ Material-UI のスタイルカスタマイズをチームで手がける時に、基本となるコーディングルールを考えてみる機会がありました。今回はその一部をメモとして紹介したいと思います。
なお、Material-UI の紹介や基本的な使い方については、以前、石垣が React + Material-UIを使用してMaterial Designのコンポーネントを作成する という記事にしていますのでご覧ください。
コーディングルールを考える前提
チームでコンポーネントのカスタマイズを分担して開発する想定の場合、ルールでがちがちに縛りすぎるとかえって開発 / レビュー負荷がかかってしまいます。自由度を保ちつつ、コードの品質担保と開発 / レビューのスピード向上に寄与するために設けるルールであることを前提としました。
- Material-UI が提供する機能や柔軟さをできるだけ打ち消さずに済むカスタマイズの方法
- Material-UI コンポーネントと CSS の独自実装を併用するパターンのルール
- コンポーネントを複数組み合わせ、ページごとに上書きや追記のカスタマイズが発生することを見込んで、最小単位のコンポーネントでは CSS の詳細度をあげない方法の選択
この3つに要点をしぼり、以下のようなルールを考えました。
コンポーネントの命名
- 開発者の任意とします。
- 命名は Material-UI に合わせてキャメルケースで書きます。
...
export const SampleText: React.FC<Props> = ({
...ファイルの命名
- 1コンポーネント1ファイルで、コンポーネント名に準じます。
CSS の color 指定
- Material Design で定義されているカラーパレットにある色は import で使用します。
- 上記のカラーパレットにない色は独自変数として指定します。
Variablesファイルを作成し、カラーパレットにある色も独自の色もまとめて指定してメンテナンス性に配慮します。
...
import grey from "@material-ui/core/colors/grey";
export const colors = {
white: "#fff",
black: "#000",
muiGrey100: grey[100], // #f5f5f5
muiGrey300: grey[300], // #e0e0e0
muiGrey500: grey[500], // #9e9e9e
};
export type ColorName = keyof typeof colors;
...CSS の font-family 指定
- Material-UI コンポーネントごとに font-family が指定されています。
CssBaselineであらかじめ任意指定している独自の font-family を継承させたいので、Material-UI コンポーネントごとにfont-family: inherit;を指定します。
...
const theme = createMuiTheme({
overrides: {
MuiTypography: {
body1: {
fontFamily: "inherit",
...Material-UI コンポーネントのデザインカスタマイズ
- 最小単位のコンポーネントでは
createMuiTheme関数を使用し、Material-UI コンポーネントのスタイルを直接変更することで、CSS セレクタの詳細度を上げずにカスタマイズができます。 - コンポーネントを複数組み合わせるなど、最小単位のコンポーネントのスタイル上書きが必要な時は
makeStyles関数を使用することで、スコープが生まれ、CSS セレクタの詳細度を上げたカスタマイズができます。
独自コンポーネントの作成
makeStyles関数を使用して作成します。makeStyles-接頭辞が付与されるので、Material-UI コンポーネントと独自コンポーネントを見分けやすくします。- ひとつのコンポーネントの中で、スタイルのカスタマイズと独自のスタイルを混在させる必要がある時は、
createMuiTheme関数とmakeStyles関数をそれぞれ分けて書き、コードの見通しのよさに配慮します。 - 独自で命名が必要な場合は [コンポーネント名 + 任意の名] とします。
...
const theme = createMuiTheme({
overrides: {
...
const useStyles = makeStyles({
componentNameAny: {
...ルールは柔軟にアップデート
実際に Material-UI コンポーネントのカスタマイズを進めてみると、ルールがうまく機能してチーム開発やレビューがスムーズに進み出したと感じています。一方で、出だしで決めたルールでも開発が進むに従いルールを変えた方がうまくいく局面もでてくるものです。今後もチームで相談しながら、Material-UI コンポーネントのスタイルをカスタマイズする際のスタンダードなルールを目指して、どしどしアップデートしていきたいです。
Gaji-Laboでは、HTML/CSSコンポーネント設計経験が豊富なパートナーさんを募集しています
現在、Gaji-Laboの開発チームの一員としてプロジェクトに一緒に取り組んでくれる業務委託のパートナーさんを募集しています。現在は特に正しいHTMLマークアップやCSS設計の業務経験が豊富なWebフロントエンドエンジニアを必要としています。
パートナー契約へのお問い合わせもお仕事へのお問い合わせも、どちらもいつでも大歓迎です。まずはオンラインでのリモート面談からはじめましょう。ぜひお気軽にお問い合わせください！
お問い合わせしてみる！
