FluentUI React v9 Combobox - 無法設定元件寬度

Question

是否有某種方法可以指定 Fluent UI Combobox 元件（@fluentui/react-components）的寬度？

對於其他輸入元素，可以使用style={{width: "123px"}} 設定（但不確定這是否是建議的方式），但這不適用於Combobox 。 < /p>

Answer 1

style={{width: "123px"}} 不起作用，因為組合框的根元素的固定 min-width 設定為 250px。

所以要改變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 類別（我認為更乾淨的方式）：

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',
        },
    },
})