FluentUI React v9 Combobox - Impossible de définir la largeur du composant

Question

Existe-t-il un moyen de spécifier la largeur d'un composant Fluent UI Combobox (@fluentui/react-components) ?

Pour d'autres éléments d'entrée, vous pouvez utiliser le paramètre style={{width: "123px"}} (mais vous ne savez pas si c'est la méthode recommandée), mais ce ne sera pas le cas. travailler avec Combobox . ≪ /p>

Answer 1

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

Alors changez la largeur de la Combobox, cela dépend de ce que vous voulez réaliser.

Si vous souhaitez simplement qu'il soit plus grand, vous pouvez simplement augmenter cette largeur minimale :

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

Si vous souhaitez le définir sur une largeur spécifique, vous pouvez supprimer la largeur minimale de l'élément racine, puis définir la largeur de l'élément d'entrée sous-jacent (dans ce cas, la largeur finale de la liste déroulante sera supérieure à 20 px en raison du remplissage d'entrée. et bouton déroulant) :

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

EDIT : Au lieu d'utiliser style-Prop, vous pouvez également utiliser des classes CSS (une manière plus propre à mon avis) :

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