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 FluentUICombobox (@fluentui/react-components) ? Pour les 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 cela ne fonctionnera pas avec Combobox.

P粉392861047 · Answer

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 :

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) :

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 (
        
            
            
        
    )
}

const useStyles = makeStyles({
    combobox: {
        minWidth: 'unset',
        '>.fui-Combobox__input': {
            width: '20px',
        },
    },
})