styled-componentを使ってMateria-UIの背景色を変える

はじめに

ポートフォリオ作成中に疑問に思ったので備忘録として残しておきます。

本文

こちらの記事たち[1][2]を参考にMaterial-UIのコンポーネントにstyledコンポーネントでスタイリングしていたのですが背景色だけが何故か変わりませんでした。

const SAppBar = styled(AppBar)`
  background-color: #193278;
  color: #fff;
  padding: 8px 0;
`;

のように書いても変わらず、困っていました。AppBarコンポーネントにstyleを使ってなら背景色の変更は出来たのですが、スタイルが２箇所に分かれるのは嫌だったので記事を何回も見直していたところ代わりにbackgroundを使っていることに気づき、変更したところ背景色が変わりました。なにが違うのか検索し[3]にたどり着いたのですがイマイチよくわかりません。個別に設定するかしないかの違いらしいですが、それならどちらもできそうな気がします。あまり深入りすぎると無駄に時間をとりそうなのでとりあえずおいといて完成後に調べようと思います。あと記事にも書いてありますが

<StylesProvider injectFirst>
      <App />
    </StylesProvider>

のようにしないと反映されないことがあります。

参考文献

[1]:Material-UI と styled-components を組み合わせて、React のサイトを怠惰にスタイリングする。
[2]:Material-UIでコンポーネントの色を変更する方法まとめ[React+Typescript]
[3]:【CSS】background-colorとbackgroundの違い