Material-UI で focused / error のスタイルを上書きするのに手間取った

suzuki

こんにちは、 Gaji-Labo フロントエンドエンジニアの鈴木です。

タイトルの通りですが、Material-UI を使ったコンポーネントで、focused や error のスタイルを上書きするのに少しハマりました。

弊社では Material-UI をまだ触ったことがないメンバーもいるので、サンプルコードを残しておこうと思います。

デフォルトのスタイル

今回は例として OutlinedInput を使用します。デフォルトのフォーカススタイルは以下の状態です。

うまくいかない書き方

フォーカス時のアウトラインをグリーンにしてみたいと思います。 OutlinedInput のスタイリングには withStyles を使用しています。

const StyleOutlinedInput = withStyles({
  root: {
    "&$focused": {
      "& $notchedOutline": {
        borderColor: "green"
      }
    },
  notchedOutline: {
    borderColor: "#747473"
  }
})(OutlinedInput);

一見よさそうに見えますが、これだとデフォルトのスタイルのままです。

解決方法

前述のコードでは足りない部分があり、root と並列して focused: {} が必要になります。

"&$focused": {} と並列に書きそうになりますが、それだと上書きされません。error、disabled も同様です。

const StyleOutlinedInput = withStyles({
  root: {
    "&$focused": {
      "& $notchedOutline": {
        borderColor: "green"
      }
    },
    "&$error": {
      "& $notchedOutline": {
        borderColor: "#f50057",
        borderWidth: "2px"
      }
    },
    "&$disabled": {
      color: "#747473",
      "& $notchedOutline": {
        borderColor: "#747473",
        backgroundColor: "rgba(0,0,0, 0.1)"
      }
    }
  },
  notchedOutline: {
    borderColor: "#747473"
  },
  focused: {},
  error: {},
  disabled: {}
})(OutlinedInput);

これで focused、error、disabled のスタイルが意図通り上書きされます。

公式の参考ドキュメント

ハマった当時はなかなか公式のドキュメントに辿り着けず苦労しました・・・以下にいくつかリンクをまとめます。

上記のサンプルコード内、 useStylesReddit に書かれています。

解決方法が分かってしまえばドキュメントを探すのも割と容易になるので、落ち着いたところでまとめることができてよかったです。

Gaji-Laboでは、Jamstackが得意なフロントエンドエンジニアを募集しています

弊社ではJamstackの知見で事業作りに貢献したいフロントエンドエンジニアを募集しています。大きな制作会社や事業会社とはひと味もふた味も違うGaji-Laboを味わいに来ませんか?

もちろん、一緒にお仕事をしてくださるパートナーさんも随時募集中です。まずはお気軽に声をかけてください。お仕事お問い合わせや採用への応募、共に大歓迎です!

求人応募してみる!


suzuki

投稿者 suzuki

フロントエンドグループリード。
HTML/CSS のマークアップから始まり、現在は React や TypeScript を使ったコンポーネント実装をすることが多いです。淡々と実装するだけではなくコミュニケーションを取りながら、チームとしてプロジェクトを前に進めることを意識しています。最近は会社の成長へのコミットに関心があり、組織・チーム全体で強まるためにはどうするのだろう?ということを考えています。