Material-ui: 선택 필드 드롭다운 위치

@Muneem 여기 페이지 하단 근처에서 논의된 대로 menuStyle 소품을 사용할 수 있을 것 같습니다.

또한 DropDownMenu 대신 Popover 구성 요소를 사용했습니다. Popover 메뉴의 시각적 위치를 보다 쉽게 ​​제어할 수 있습니다.

선택 필드에서만 드롭다운을 원합니다. 드롭다운의 수직 위치를 어떻게 제어할 수 있습니까? 지금 메뉴가 선택 필드 레이블을 겹치고 숨기고 있습니다.

+1 답변이 되었습니까?

다른 사람이 1.0에서 같은 질문을 하는 경우를 대비하여 여기에 남겨두고 싶었습니다.

<Select
  MenuProps={{
    getContentAnchorEl: null,
    anchorOrigin: {
      vertical: "bottom",
      horizontal: "left",
    }
  }}
>

</Select>

@cobbs-totem 당신은 진짜 mvp입니다

@JeremyGrieshop 당신이 챔피언입니다 :D

@JeremyGrieshop 감사하기 위해 미래에서

@JeremyGrieshop 당신은 나의 하루를 만듭니다

그래 이건 굉장해!

<Select
          defaultValue=""
          MenuProps={{
            anchorOrigin: {
              vertical: "bottom",
              horizontal: "left"
            },
            transformOrigin: {
              vertical: "top",
              horizontal: "left"
            },
            getContentAnchorEl: null
          }}
        >
          <MenuItem value={1}>Option 1</MenuItem>
          <MenuItem value={2}>Option 2</MenuItem>
</Select>

@JeremyGrieshop 2년 후, 감사합니다! 💯

@JeremyGrieshop 제발 도와주세요, 말씀하신대로 했는데 클릭 후 제 위치는 뷰포트 하단이고 뷰포트 왼쪽입니다. 도와주세요. Material UI 메뉴를 사용하고 있습니다.

<Menu anchorBuyer={anchorBuyer} anchorOrigin={{ vertical: "top", horizontal: "left" }} id={menuIdBuyer} keepMounted transformOrigin={{ vertical: "top", horizontal: "left" }} open={isMenuBuyerOpen} onClose={handleMenuCloseBuyer} >

위의 답변에서 드롭다운 위치를 성공적으로 변경한 후 선택을 클릭할 때 레이블이 누락되는 문제가 있었는데 기본 스타일이 내 배경색인 포커스에서 입력 레이블 색상을 흰색으로 변경하는 것으로 나타났습니다. 이를 수정하려면 X 클래스에 color: "initial" <InputLabel classes={{focused: classes.X}}> 스타일을 재정의하면 됩니다. 무이 v4.11.0

모두들 안녕,
현재 @JeremyGrieshop 및 @pzanwar03 메서드로 성공하지 못했습니다(MenuItems의 위치 변경 없음). 내 <Select> 가 <FormControl> 둘러싸여 있기 때문일 수 있습니까 ? 미리 조언해 주셔서 감사합니다.

`` javascript <FormControl className={classes.textField}> <InputLabel id="demo-simple-select-outlined-label">Type</InputLabel> <Select MenuProps={{ anchorOrigin: { vertical: "bottom", horizontal: "left" }, transformOrigin: { vertical: "top", horizontal: "left" }, getContentAnchorEl: null }} labelId="demo-simple-select-outlined-label" id="demo-simple-select-outlined" value={props.x} onChange={props.handleChange} label="x" name="x"> <MenuItem value={'1'}>1</MenuItem> <MenuItem value={'2'}>2</MenuItem> </Select> </FormControl>