FluentUI React v9 Combobox - Unable to set component width

Question

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.

Answer 1

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