material-ui v4で、Selectを選択しているときの見た目を変える

結論

Selet自体をスタイリングするのではなく、InputBaseをスタイリングしてSelectに渡す

方法

material-uiのwithStylesなどを使ってスタイリングする場合は、上記ドキュメントのCSSのRule nameに対してスタイリングを適用していきます。
選択している状態のスタイルはfocusedに書いていきます。

styled-componentのstyledを使ってスタイリングする場合は、上記ドキュメントのCSSのGlobal classが割り当てられている場合に対してスタイリングを適用していきます。
選択している状態のスタイルは&.Mui-focusedに書いていきます。

import { InputBase, Select, MenuItem } from "@material-ui/core";

const StyledInputBase = withStyles(() => ({
  root: {
    outline: '1px solid black',
  },
  focused: {
    outline: '1px solid red',
  }
}))(InputBase);

import { InputBase, Select, MenuItem } from "@material-ui/core";
import styled from "styled-components";

const StyledInputBase = styled(InputBase)`
  outline: 1px solid black;
  &.Mui-focused {
    outline: 2px solid red;
  }
`

あとは、作成したStyledInputBaseをSelectに渡します。

<Select
  input={<StyledInputBase />}
  variant="outlined"
>
  <MenuItem value="foo">foo</MenuItem>
  <MenuItem value="bar">bar</MenuItem>
  <MenuItem value="baz">baz</MenuItem>
</Select>

このように、Selectが選択されているときの見た目を変えることができます。

参考記事