如何调整Fluent UI预览版Dropdown按钮的宽度？

你尝试的方式没生效，是因为Dropdown的触发按钮（内部trigger元素）有默认最小宽度约束，需要直接针对这个trigger元素设置样式。以下是两种可行的解决方法：

方法1：使用makeStyles自定义trigger样式 #

修改useStyles，添加针对Dropdown trigger的样式规则：

const useStyles = makeStyles({
  root: {
    display: "grid",
    gridTemplateRows: "repeat(1fr)",
    justifyItems: "start",
    ...shorthands.gap("2px"),
  },
  dropdownTrigger: {
    width: "200px", // 设置你需要的宽度
    minWidth: "100px" // 覆盖默认最小宽度
  }
});

然后在Dropdown组件中应用该样式：

<Dropdown
  aria-labelledby={dropdownId}
  placeholder="Select an animal"
  trigger={{ className: styles.dropdownTrigger }}
  {...props}
>
  {/* 选项内容 */}
</Dropdown>

方法2：通过行内样式直接设置trigger宽度 #

如果不想额外定义样式类，可直接在Dropdown的trigger属性中设置行内样式：

<Dropdown
  aria-labelledby={dropdownId}
  placeholder="Select an animal"
  trigger={{ style: { width: '200px', minWidth: '100px' } }}
  {...props}
>
  {/* 选项内容 */}
</Dropdown>

修改后的完整代码示例 #

import { makeStyles, shorthands, useId } from "@fluentui/react-components";
import {
  Dropdown,
  Option,
  OptionGroup,
  DropdownProps
} from "@fluentui/react-components/unstable";
import * as React from "react";

const useStyles = makeStyles({
  root: {
    display: "grid",
    gridTemplateRows: "repeat(1fr)",
    justifyItems: "start",
    ...shorthands.gap("2px"),
  },
  dropdownTrigger: {
    width: "200px",
    minWidth: "100px"
  }
});

export const Grouped = (props: Partial<DropdownProps>) => {
  const dropdownId = useId("dropdown-grouped");
  const land = ["Cat", "Dog", "Ferret", "Hamster"];
  const water = ["Fish", "Jellyfish", "Octopus", "Seal"];
  const styles = useStyles();

  return (
    <div className={styles.root}>
      <label id={dropdownId}>Best pet</label>
      <Dropdown
        aria-labelledby={dropdownId}
        placeholder="Select an animal"
        trigger={{ className: styles.dropdownTrigger }}
        {...props}
      >
        <OptionGroup label="Land">
          {land.map((option) => (
            <Option key={option} disabled={option === "Ferret"}>
              {option}
            </Option>
          ))}
        </OptionGroup>
        <OptionGroup label="Sea">
          {water.map((option) => (
            <Option key={option}>{option}</Option>
          ))}
        </OptionGroup>
      </Dropdown>
    </div>
  );
};

Grouped.parameters = {
  docs: {
    description: {
      story:
        "Dropdown options can be semantically grouped with the `OptionGroup` element, with an optional group label."
    }
  }
};

内容的提问来源于stack exchange，提问作者SoftTimur