FluentUI React v9 Combobox - Tidak dapat menetapkan lebar komponen

Question

Adakah terdapat beberapa cara untuk menentukan lebar komponen Kotak Kombo Fluent UI (@fluentui/react-components)?

Untuk elemen input lain, anda boleh menggunakan tetapan style={{width: "123px"}} (tetapi tidak pasti jika ini cara yang disyorkan), tetapi ini tidak bekerja dengan Combobox . < /p>

Answer 1

style={{width: "123px"}} 不起作用，因为组合框的根元素的固定 min-width Tetapkan kepada 250px.

Jadi ubah lebar Combobox, bergantung pada apa yang anda ingin capai.

Jika anda hanya mahu ia lebih besar, anda boleh menambah lebar min ini:

<Combobox
    style={{minWidth: '800px'}}
>
    <Option>A</Option>
    <Option>B</Option>
</Combobox>

Jika anda ingin menetapkannya kepada lebar tertentu, anda boleh menyahset lebar min elemen akar dan kemudian tetapkan lebar elemen input asas (dalam kes ini, lebar akhir kotak kombo akan lebih besar daripada 20px kerana padding input dan butang lungsur):

<Combobox
    style={{minWidth: 'unset'}}
    input={{style: {width: '20px'}}}
>
    <Option>A</Option>
    <Option>B</Option>
</Combobox>

EDIT: Daripada menggunakan style-Prop, anda juga boleh menggunakan kelas css (cara yang lebih bersih pada pendapat saya):

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