You can not change the default `anchorOrigin.vertical` value 오류

사용한 코드는 다음과 같다.

<Menu
  anchorEl={anchorEl}
  getContentAnchorEl={null} // 이 코드를 추가해주어야한다.
  keepMounted
  anchorOrigin={{
  vertical: 'bottom', // 이렇게 조정하려면 getContentAnchorEl을 setting해주어야함
  horizontal: 'left',
  }}
  open={anchorEl !== null}
  onClose={handleClose}
  className="color-picker"
>
  {
  	colorArr.map(...)
  }
</Menu>

 

해당 코드는 정상동작하지만, 표시된 getContentAnchorEl을 속성으로 설정하지 않으면 다음과 같은 오류가 뜬다.

Material-UI: You can not change the default `anchorOrigin.vertical` value 
when also providing the `getContentAnchorEl` prop to the popover component.
Only use one of the two props.
Set `getContentAnchorEl` to `null | undefined` or leave `anchorOrigin.vertical` unchanged.

 

material-ui의 popover 컴포넌트 API를 살펴보았다.

material-ui.com/api/popover/#popover-api

Popover API - Material-UI

API에서 getContentAnchorEl은 content anchor element를 검색하기 위해 사용되며, content anchor element는 anchor element 바로 위에 위치한다고 한다.

따라서 null로 등록해주면 기존에 anchorEl 속성으로 등록한 anchor element가 위치의 기준이 되면서 popover의 위치가 제대로 잡힌다.