英文:
FluentUI React v9 Combobox - Unable to set component width
问题
Is there some way to specify width of the Fluent UI Combobox component (@fluentui/react-components)?
For other input elements it can be set using style={{width: "123px"}}
(not sure if that's the recommended way though), but that does not work with Combobox.
英文:
Is there some way to specify width of the Fluent UI Combobox component (@fluentui/react-components)?
For other input elements it can be set using style={{width: "123px"}}
(not sure if that's the recommended way though), but that does not work with Combobox.
答案1
得分: 0
style={{width: "123px"}}
无效,因为Combobox的根元素具有固定的min-width
设置为250px。
要更改Combobox的宽度,取决于您想要实现什么效果。
如果您只想使其更大,您可以简单地增加此min-width:
<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
属性,您还可以使用CSS类(在我看来更清晰的方法):
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"}}
doesn't work, because the root element of the Combobox has a fixed min-width
set to 250px.
So to change the width of the Combobox, it depends on what you want to achive.
If you just want to make it larger, you can simply increase this min-width:
<Combobox
style={{minWidth: '800px'}}
>
<Option>A</Option>
<Option>B</Option>
</Combobox>
If you want to set it to a specific width, you can unset the min-width of the root element and then set the width of the underlying input element (in this example, the final width of the Combobox will be larger than 20px, because of the input-padding and the dropdown button):
<Combobox
style={{minWidth: 'unset'}}
input={{style: {width: '20px'}}}
>
<Option>A</Option>
<Option>B</Option>
</Combobox>
Edit: instead of using the style
-Prop, you could also use css classes (cleaner way in my opinion):
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',
},
},
})
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论