如何移除Fluent UI预览版Dropdown按钮的所有边框？

我正在使用Fluent UI的预览版Dropdown组件，希望移除该按钮的所有边框（包括底部边框），尝试在<Dropdown>组件中添加root={{ borderBottom: "none"}}配置，但未生效，求解决方案。

解决方案 #

Fluent UI的Dropdown组件的边框样式定义在control部件上，而非root元素，所以直接设置root的border不会生效。需要通过control道具覆盖边框样式，同时处理不同交互状态（如hover、focus）下的样式，确保彻底移除所有边框：

• 自定义control样式，设置border: "none"
• 覆盖:hover和:focus-visible伪类的边框样式，避免交互时边框重新出现
• 针对appearance="underline"的场景，同步移除默认底部边框

修改后的完整代码 #

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"),
    maxWidth: "500px"
  },
  // 定义移除边框的control样式
  noBorderControl: {
    border: "none",
    "&:hover": {
      border: "none"
    },
    "&:focus-visible": {
      border: "none",
      // 可选：如果不需要焦点轮廓，可移除outline
      outline: "none"
    }
  }
});

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"
        appearance="underline"
        // 将自定义样式应用到control部件
        control={{ className: styles.noBorderControl }}
        {...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."
    }
  }
};

说明 #

通过control={{ className: styles.noBorderControl }}将自定义样式绑定到Dropdown的控制核心部件，同时覆盖了hover和focus状态下的边框规则，确保所有场景下都不会显示边框。若需要保留焦点提示，可以删除outline: "none"配置。

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