Maison > Questions et réponses > le corps du texte
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', }, }, })