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

gaji-staff

2021.2.8

実践と知見

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

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

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

デフォルトのスタイル

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

うまくいかない書き方

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

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

https://codesandbox.io/s/material-ui-input-sample01-olqfi?file=/src/App.js

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

解決方法

前述のコードでは足りない部分があり、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);