如何缩小Dropdown按钮左内边距及与Button 2的间距？

要缩小Button 2与Dropdown之间的间距，需要从调整Dropdown触发按钮的内边距和优化组件布局嵌套两个方面入手，具体修改如下：

1. 移除不必要的FluentProvider嵌套 #

原代码在右侧按钮容器内单独嵌套了FluentProvider，这会导致样式隔离和优先级问题。建议将FluentProvider移到组件最外层，确保全局样式统一。

2. 调整Dropdown触发按钮的内边距与外边距 #

通过triggerProps直接给Dropdown内部的触发按钮设置样式（比直接修改类名更稳定，避免类名变更风险），同时可按需调整CommandBarButton的右边距进一步优化间距。

修改后的完整代码 #

import {
  FluentProvider,
  webLightTheme,
  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();
const useStyles = makeStyles({
  dropdown: {
    // 移除Dropdown默认边框
    ...shorthands.borderWidth(0),
    // 移除Dropdown展开时的蓝色底部边框
    "::after": {
      borderBottomWidth: 0
    }
  },
  // 可选：调整按钮之间的默认间距
  buttonRoot: {
    height: 44,
    marginRight: "4px"
  }
});

export const Grouped = (props: Partial<DropdownProps>) => {
  const land = ["Cat", "Dog", "Ferret", "Hamster"];
  const styles = useStyles();
  
  return (
    <FluentProvider theme={webLightTheme}>
      <div style={{ display: "flex", justifyContent: "space-between" }}>
        <div style={{ flexBasis: "auto" }}>
          <span style={{ lineHeight: "2.7rem" }}>Title</span>
        </div>
        <div style={{ display: "flex", alignItems: "center" }}>
          <CommandBarButton
            styles={{ root: styles.buttonRoot }}
            iconProps={{ iconName: "Back" }}
            ariaLabel="Back"
            text="Button 1"
            disabled={false}
            checked={false}
          />
          <CommandBarButton
            styles={{ root: styles.buttonRoot }}
            iconProps={{ iconName: "Up" }}
            text="Button 2"
            disabled={false}
            checked={false}
          />

          <Dropdown
            className={styles.dropdown}
            style={{ minWidth: "auto" }}
            defaultSelectedOptions={["Cat"]}
            // 调整触发按钮的内边距和左边距，拉近与Button2的距离
            triggerProps={{
              style: {
                paddingLeft: "8px",
                paddingRight: "12px",
                marginLeft: "-6px"
              }
            }}
            {...props}
          >
            <OptionGroup label="Land">
              {land.map((option) => (
                <Option key={option} disabled={option === "Ferret"}>
                  {option}
                </Option>
              ))}
            </OptionGroup>
          </Dropdown>
        </div>
      </div>
    </FluentProvider>
  );
};

关键修改说明 #

• triggerProps：直接给Dropdown的内部触发按钮传递样式，精准控制其内边距（paddingLeft）和外边距（marginLeft），解决之前直接设置Dropdown样式不生效的问题。
• 移除嵌套FluentProvider：确保样式全局统一，避免局部样式隔离导致的样式覆盖失效。
• 按钮样式优化：通过buttonRoot类统一设置按钮高度和右边距，让整体布局更紧凑。

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