SelectFieldのポップオーバー位置アンカーの制御

Question

SelectFieldのポップオーバーの位置を制御する方法を知っている人はいますか？

selectfieldにはドロップダウンメニューがあり、ポップオーバーは含まれていませんが、何とかこれを制御することは可能かもしれないと思いました。

Answer 1

私は実際に同じ問題に直面しました。

少なくとも、設定可能なプロパティの一部ではないとは思いません。私はSelectFieldソースを調べました。明らかに、DropDownMenuが下にあり、DropDownが下にPopOverを使用していますが、anchorOriginの設定はハードコードされています。

https://github.com/callemall/material-ui/blob/master/src/DropDownMenu/DropDownMenu.js#L9

const anchorOrigin = { 
    vertical: 'top', 
    horizontal: 'left', 
}; 

Answer 2

あなたは、あなたの上にSelectFieldコンポーネントで小道具dropDownMenuPropsを使用して、ドロップダウンメニューの小道具に乗ることができます。

Answer 3

それが実際に可能である：

<SelectField dropDownMenuProps={{anchorOrigin:{vertical:"center",horizontal:"left"}}}> 
    <MenuItem value={1} primaryText="one" /> 
    <MenuItem value={2} primaryText="two" /> 
    <MenuItem value={3} primaryText="three" /> 
</SelectField> 

あなたは正確に（実際には「ドロップダウンメニュー」である）あなたの「ポップオーバー」の位置を設定する必要がある場合、私は数えるあなたのいずれかをオーバーライドすることで試すことができます異なる（スタイル？）、そのメニューの小道具：http://www.material-ui.com/#/components/dropdown-menu（「プロパティ」の部分）

は、他の方法ではなくポップオーバーを使用することです...

はまた、新しいv1.0のベータ版は、ちょうどそのを持っていました選択されたコンポーネントを選択します。 https://material-ui-1dab0.firebaseapp.com/demos/selects/