react + styled-components + material-ui スタイルが効かない

styled-componentsでスタイルをあてるとき

通常

const StyledDiv = styled.div`
  background-color: #f5f5f7;
  width: 100%;
  height: 100px;
`;

html要素にあてるときは公式通りの使い方でおｋ

material-uiのコンポーネントにあてるときも基本は公式通りでいい

import { Box } from "@material-ui/core";

const StyledBox = styled(Box)`
  background-color: #f5f5f7;
  width: 100%;
  height: 100px;
`;

例外パターン

import { Button } from "@material-ui/core";

const StyledBox = styled(Button)`
  background-color: #f5f5f7;
  width: 100%;
  color:#fff; /*これは効かない*/
`;

material-uiのスタイルのデフォルト値は普通に整形しても変更が効かない場合がある。

import { Button } from "@material-ui/core";

const StyledBox = styled(Button)`
  background-color: #f5f5f7;
  width: 100%;
  height:100px;
  color:#fff !important; /*これは効く*/
`;

ゴリ押しでやるならこれでも可。

ちゃんとやるなら
オーバーライド勉強しないとだめ？