FluentUI React v9 Combobox - Unable to set component width
P粉823268006
2023-09-01 15:34:55
<p>Is there some way to specify the width of a Fluent UI Combobox component (@fluentui/react-components)? </p>
<p>For other input elements, you can use the <code>style={{width: "123px"}}</code> setting (but not sure if this is the recommended way), but this will not work with Combobox . < /p>
style={{width: "123px"}}
doesn't work because the combobox's root element has a fixedmin-width
set to 250px.So change the width of the Combobox, depending on what you want to achieve.
If you just want it to be bigger, you can simply increase this minimum width:
If you want to set it to a specific width, you can unset the root element's min-width and then set the width of the underlying input element (in this case, the final width of the Combobox will be larger than 20px because of the input padding and the dropdown button) :
EDIT: Instead of using
style
-Prop, you can also use css classes (a cleaner way in my opinion):