我使用的是preview Dropdown of Fluent UI。
我想减少按钮的宽度。我试着修改maxWidth: "500px"，它不工作。我试着在<Dropdown中添加root={{ minWidth: "100px"}}，它也不工作。
有人能帮忙吗？
代码沙箱：https://codesandbox.io/s/distracted-gianmarco-51guru?file=/example.tsx

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: {
    // Stack the label above the field with a gap
    display: "grid",
    gridTemplateRows: "repeat(1fr)",
    justifyItems: "start",
    ...shorthands.gap("2px"),
    maxWidth: "500px"
  }
});
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"
        {...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."
    }
  }
};