Material-ui: 選択フィールドのドロップダウン位置

@Muneemページの下部近くでここで説明されているように、 menuStyleプロップを使用できるようです。

DropDownMenu代わりにPopoverコンポーネントも使用しました。 ポップオーバーメニューの視覚的な位置を簡単に制御できます。

選択フィールドにのみドロップダウンが必要です。ドロップダウンの垂直位置を制御するにはどうすればよいですか。現在、メニューが重なって選択フィールドラベルを非表示にしています。

+1は答えられましたか？

他の誰かが1.0で同じ質問をした場合に備えて、これをここに残したかっただけです。

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

</Select>

@ cobbs-あなたに本当の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助けてください、あなたが言ったように私はしましたが、クリックした後の私の位置はビューポートの下と左のビューポートです。 助けてください。 マテリアル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}}>オーバーライドするだけです。 mui v4.11.0

皆さんこんにちは、
現在@JeremyGrieshopとし、pzanwar03方法@任意の成功（のMenuItem位置の変化なし）を持っていません。 これは、私の<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>