FluentUI React v9 Combobox - 无法设置组件宽度
P粉823268006
P粉823268006 2023-09-01 15:34:55
0
1
648
<p>是否有某种方法可以指定 Fluent UI Combobox 组件(@fluentui/react-components)的宽度?</p> <p>对于其他输入元素,可以使用 <code>style={{width: "123px"}}</code> 设置(但不确定这是否是推荐的方式),但这不适用于 Combobox。< /p>
P粉823268006
P粉823268006

全部回复(1)
P粉392861047

style={{width: "123px"}} 不起作用,因为组合框的根元素的固定 min-width 设置为 250px。

所以要改变Combobox的宽度,这取决于你想要达到的目的。

如果你只是想让它更大,你可以简单地增加这个最小宽度:

<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-Prop,您还可以使用 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',
        },
    },
})
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板