我想做一个行，那里有一个标题在左边，几个按钮和一个下拉菜单在右边。
我使用Flexbox来安排它们的水平位置。
现在，下拉菜单（例如Cat）与按钮没有垂直对齐，注意如果我们移除图标（例如iconProps={{ iconName: "Back" }}），它们将对齐。
我试着把style={{ minWidth: "auto", marginTop: "-10px" }}或style={{ minWidth: "auto", paddingTop: "-10px" }}作为下拉菜单，但没有效果。
有人能帮忙吗？
https://codesandbox.io/s/peaceful-mopsa-2qr5qu?file=/example.tsx

import { makeStyles, shorthands } from "@fluentui/react-components";
import {
  Dropdown,
  Option,
  OptionGroup,
  DropdownProps
} from "@fluentui/react-components/unstable";
import { CommandBarButton } from "@fluentui/react/lib/Button";
import * as React from "react";
import { initializeIcons } from "@fluentui/react/lib/Icons";

initializeIcons(/* optional base url */);
const useStyles = makeStyles({
  dropdown: {
    // removes default border around the dropdown
    ...shorthands.borderWidth(0),
    // removes the blue bottom border when the dropdown is open
    "::after": {
      borderBottomWidth: 0
    }
  }
});
export const Grouped = (props: Partial<DropdownProps>) => {
  const land = ["Cat", "Dog", "Ferret", "Hamster"];
  const styles = useStyles();
  return (
    <div style={{ display: "flex", justifyContent: "space-between" }}>
      <div style={{ flexBasis: "auto" }}>
        <span style={{ lineHeight: "2.7rem" }}>Title</span>
      </div>
      <div style={{ flexBasis: "auto" }}>
        <CommandBarButton
          styles={{ root: { height: 44 } }}
          iconProps={{ iconName: "Back" }}
          ariaLabel="Back"
          text="Button 1"
          disabled={false}
          checked={false}
        />
        <CommandBarButton
          styles={{ root: { height: 44 } }}
          iconProps={{ iconName: "Up" }}
          text="Button 2"
          disabled={false}
          checked={false}
        />

        <Dropdown
          className={styles.dropdown}
          style={{ minWidth: "auto" }}
          defaultSelectedOptions={["Cat"]}
          {...props}
        >
          <OptionGroup label="Land">
            {land.map((option) => (
              <Option key={option} disabled={option === "Ferret"}>
                {option}
              </Option>
            ))}
          </OptionGroup>
        </Dropdown>
      </div>
    </div>
  );
};