FluentUI React v9 Combobox - Unable to set component width

Question

Is there some way to specify the width of a Fluent UI Combobox component (@fluentui/react-components)?

For other input elements, you can use the style={{width: "123px"}} setting (but not sure if this is the recommended way), but this will not work with Combobox . < /p>

Answer 1

style={{width: "123px"}} doesn't work because the combobox's root element has a fixed min-width set to 250px.

So change the width of the Combobox, depending on what you want to achieve.

If you just want it to be bigger, you can simply increase this minimum 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 root element's min-width and then set the width of the underlying input element (in this case, 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 style-Prop, you can also use css classes (a 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',
        },
    },
})