FluentUI React v9 Combobox – 无法设置组件宽度

huangapple go评论73阅读模式
英文:

FluentUI React v9 Combobox - Unable to set component width

问题

Is there some way to specify width of the Fluent UI Combobox component (@fluentui/react-components)?

For other input elements it can be set using style={{width: "123px"}} (not sure if that's the recommended way though), but that does not work with Combobox.

英文:

Is there some way to specify width of the Fluent UI Combobox component (@fluentui/react-components)?

For other input elements it can be set using style={{width: "123px"}} (not sure if that's the recommended way though), but that does not work with Combobox.

答案1

得分: 0

style={{width: "123px"}} 无效,因为Combobox的根元素具有固定的min-width设置为250px。

要更改Combobox的宽度,取决于您想要实现什么效果。

如果您只想使其更大,您可以简单地增加此min-width:

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

如果要将其设置为特定宽度,您可以取消根元素的min-width,然后设置底层输入元素的宽度(在此示例中,Combobox的最终宽度将大于20px,因为包括输入的填充和下拉按钮):

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

编辑:而不是使用style属性,您还可以使用CSS类(在我看来更清晰的方法):

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

style={{width: &quot;123px&quot;}} doesn't work, because the root element of the Combobox has a fixed min-width set to 250px.

So to change the width of the Combobox, it depends on what you want to achive.

If you just want to make it larger, you can simply increase this min-width:

&lt;Combobox
    style={{minWidth: &#39;800px&#39;}}
&gt;
    &lt;Option&gt;A&lt;/Option&gt;
    &lt;Option&gt;B&lt;/Option&gt;
&lt;/Combobox&gt;

If you want to set it to a specific width, you can unset the min-width of the root element and then set the width of the underlying input element (in this example, the final width of the Combobox will be larger than 20px, because of the input-padding and the dropdown button):

&lt;Combobox
    style={{minWidth: &#39;unset&#39;}}
    input={{style: {width: &#39;20px&#39;}}}
&gt;
    &lt;Option&gt;A&lt;/Option&gt;
    &lt;Option&gt;B&lt;/Option&gt;
&lt;/Combobox&gt;

Edit: instead of using the style-Prop, you could also use css classes (cleaner way in my opinion):

export const ComboboxExample: FunctionComponent = () =&gt; {
    const classes = useStyles()
    return (
        &lt;Combobox className={classes.combobox}&gt;
            &lt;Option&gt;A&lt;/Option&gt;
            &lt;Option&gt;B&lt;/Option&gt;
        &lt;/Combobox&gt;
    )
}

const useStyles = makeStyles({
    combobox: {
        minWidth: &#39;unset&#39;,
        &#39;&gt;.fui-Combobox__input&#39;: {
            width: &#39;20px&#39;,
        },
    },
})

huangapple
  • 本文由 发表于 2023年6月30日 00:11:20
  • 转载请务必保留本文链接:https://go.coder-hub.com/76582836.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定