Material-UIのSelectの高さを変えたい時

Material-UIでSelectを使う時、optionのlength数がかなり多い時があると思います。
今回はレアケースの紹介になりますが、「Material-UIのSelectで高さを調整したい」をテーマにしようと思います。

ビフォー＆アフター

例でお見せするのは「0〜1000」（50飛ばし）の数字から選ばせるセレクトボックスです。
このようにoptionが多すぎると、セレクトボックスをクリックした時ブラウザの高さ90％を占拠することになります。

高さをもう少し縮めて、表示する位置も正しく調整することにします。
目指すアフターはこちらです。

実装

const selectValues = [
  0,
  50,
  ・・・
  1000,
]

  ・・・

<Select
  name="sample"
  value={this.state.sample}
  onChange={onChange}
  MenuProps={{
    anchorOrigin: {
      vertical: 'bottom',
      horizontal: 'left',
    },
    transformOrigin: {
      vertical: 'top',
      horizontal: 'left',
    },
    getContentAnchorEl: null,
    classes: {
      paper: classes.dropdownStyle,
    },
  }}
>
  {selectValues.map((value) => (
    <MenuItem value={value} key={value}>
      {value}
    </MenuItem>
  ))}
</Select>

スタイルを調整するdropdownStyleはこんな感じです。

const styles = () => ({
  dropdownStyle: {
    maxHeight: 300,
  },
})

Material-UIの場合、withStylesを使わなきゃなのですが…！(^◇^;)

①<Select />のpaperに対し、cssを当てます。そこでセレクトをクリックした時に表示される、オプションをラップするPaperを調子することが出来ます！
②anchorOrigin、transformOriginを指定することで、ドロップダウンメニューが常にセレクトボックスに対してどの位置に表示させるかと指定できます。

まとめ

最初指定するのに迷ったので記事にしてみました。Material-UIについて、特殊な実装やスタイル調整があったら記事にしようと思います^ ^
（何気にlodashの記事について「いいね」を頂いてるのと、自分がlodash使ってるのでlodashシリーズ次回から続けます笑）