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 시리즈 다음번부터 계속합니다 웃음)