使下拉列表的宽度不同于下拉按钮的宽度

Question

我想实现一个下拉菜单，其中下拉按钮的宽度不一定等于下拉列表的宽度。

我知道我们可以使用style={{ minWidth: '200px' }}来控制下拉按钮和下拉列表的宽度。现在，我想让下拉列表的宽度为500px。

我尝试在样式表中设置.fui-Listbox { width: 500px }，但它不起作用。

有人知道怎么做吗?

StackBlitz: https://stackblitz.com/edit/react-ts-cejuzs?file=App.tsx, style.css index . html

import {
FluentProvider,
webLightTheme,
makeStyles,
shorthands,
} from '@fluentui/react-components';
import {
Dropdown,
Option,
DropdownProps,
} from '@fluentui/react-components/unstable';
import { TextField } from '@fluentui/react';
import * as React from 'react';
import './style.css';
export default class Grouped extends React.Component<{}, {}> {
land = ['Cat', 'Dog', 'Ferret', 'Hamster'];
render() {
return (
<FluentProvider
className="fluent-provider"
style={{ display: 'flex' }}
theme={webLightTheme}
>
<Dropdown
className="drop-down"
style={{ minWidth: '200px' }}
placeholder="Select an animal"
>
{this.land.map((option) => (
<Option key={option}>{option}</Option>
))}
</Dropdown>
</FluentProvider>
);
}
}

编辑1:根据pier farrugia的回答，我尝试使用.fui-Listbox { width: 500px !important; }。它确实使下拉列表的宽度500px，但是它影响了项目中的所有下拉列表，这不是我想要的。我尝试添加类并编写选择器，如.drop-down .fui-Listbox { width: '500px' !important; }和.drop-down-2 .fui-Listbox { width: '100%' !important; }，但它不起作用。我想这是因为在下拉模式下，.fui-Listbox不是drop-down-2或.fluent-provider-2的子类。有人知道如何正确地编写选择器，以限制仅对下拉目标的影响吗?

https://stackblitz.com/edit/react-ts-51hiro?file=App.tsx style.css, index . html

Answer 1

在代码中:

<Dropdown
className="drop-down"
style={{ width: '100px' }}
placeholder="Select an animal"
>

你的样式100px是动态生成的

即使使用!important也不能改变样式。

修改行

style={{width: '100px'}}

style={{width: '500px'}}

Answer 2

要仅改变下拉列表的宽度，您必须为特定的下拉槽(listbox)使用style或className标签:

<Dropdown
className="drop-down"
style={{ minWidth: '200px' }}
placeholder="Select an animal"
listbox={{style: {width: "500px"}}}
>
{this.land.map((option) => (
<Option key={option}>{option}</Option>
))}
</Dropdown>

或者如果你想继续使用你的样式表

<Dropdown
className="drop-down"
style={{ minWidth: '200px' }}
placeholder="Select an animal"
listbox={{className: "custom-dropdown-width"}}
>
{this.land.map((option) => (
<Option key={option}>{option}</Option>
))}
</Dropdown>

和样式表

.custom-dropdown-width {
width: '500px' !important;
}