MUIのCSSを一部書き換える
これは2020/1/20に書かれた記事。多分v3かv4なので今は異なっている可能性がある
Material-UIのコンポーネントは、8割型（？）いい感じになるようにできている。CSSを一部書き換えたいときにどうするか
書き換えたいときっていつ？
入れ子になった要素に対してスタイルを当てたいとき
例えばAutocompleteを作成するとこんなふうに入れ子のdiv要素が作成され、クラスが指定される
Autocompleteに対してclassNameでstyleを指定すると、最もトップレベルにだけstyleが適用されるが、子要素のstyleを変更できない
https://gyazo.com/7d3bd320c6a01b3f623780fdebb68042
手順
1. 書き換えたい要素が影響しているクラス（.MuiFoo-Bar）をDevToolsなどで探す
2. 対応するCSSのRuleをコンポーネントの表から見つける
https://material-ui.com/api/autocomplete/#css
例えばここでinputRootを書き換えたかったとする
3. 書き換えたいスタイルを作成してclassesのobject propとしてわたす
code:jsx
const useStyles = makeStyles((theme: Theme) => const useStyles = makeStyles((theme: Theme) =>
createStyles({
// 書き換え対象のスタイルを作成
inputRoot: {
textSize: '2434rem',
},
})
));
function TekitouComponent() {
const classes = useStyles();
<Autocomplete
classes={{inputRoot: classes.inputRoot}}
// 略
}