recherche

Maison  >  Questions et réponses  >  le corps du texte

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

<p>Existe-t-il un moyen de spécifier la largeur d'un composant Fluent UI Combobox (@fluentui/react-components) ? </p> <p>Pour d'autres éléments d'entrée, vous pouvez utiliser le paramètre <code>style={{width: "123px"}}</code> (mais vous ne savez pas si c'est la méthode recommandée), mais ce ne sera pas le cas. travailler avec Combobox . ≪ /p>
P粉823268006P粉823268006456 Il y a quelques jours611

répondre à tous(1)je répondrai

  • P粉392861047

    P粉3928610472023-09-02 09:32:52

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

    répondre
    0
  • Annulerrépondre