style={{width: "123px"}} 不起作用,因为组合框的根元素的固定 min-width 设置为 250px。
style={{width: "123px"}}
min-width
所以要改变Combobox的宽度,这取决于你想要达到的目的。
如果你只是想让它更大,你可以简单地增加这个最小宽度:
<Combobox style={{minWidth: '800px'}} > <Option>A</Option> <Option>B</Option> </Combobox>
如果要将其设置为特定宽度,可以取消设置根元素的 min-width,然后设置底层输入元素的宽度(在本例中,Combobox 的最终宽度将大于20px,因为输入填充和下拉按钮):
<Combobox style={{minWidth: 'unset'}} input={{style: {width: '20px'}}} > <Option>A</Option> <Option>B</Option> </Combobox>
编辑:除了使用 style-Prop,您还可以使用 css 类(我认为更干净的方式):
style
export const ComboboxExample: FunctionComponent = () => { const classes = useStyles() return ( <Combobox className={classes.combobox}> <Option>A</Option> <Option>B</Option> </Combobox> ) } const useStyles = makeStyles({ combobox: { minWidth: 'unset', '>.fui-Combobox__input': { width: '20px', }, }, })
style={{width: "123px"}}
不起作用,因为组合框的根元素的固定min-width
设置为 250px。所以要改变Combobox的宽度,这取决于你想要达到的目的。
如果你只是想让它更大,你可以简单地增加这个最小宽度:
如果要将其设置为特定宽度,可以取消设置根元素的 min-width,然后设置底层输入元素的宽度(在本例中,Combobox 的最终宽度将大于20px,因为输入填充和下拉按钮):
编辑:除了使用
style
-Prop,您还可以使用 css 类(我认为更干净的方式):