如何配置Fluent UI Dropdown实现下拉面板黑色背景？

要实现下拉面板的黑色背景，你需要在现有样式中添加对弹出面板（callout）和选项容器/选项的样式覆盖——当前你的样式仅处理了输入框标题、下拉箭头等表层元素，未覆盖下拉面板的核心样式。

修改后的完整样式代码如下：

const dropdownStyles = (styleProps) => {
    const chkStyles = {
        title: [{
            borderRadius: "5px",
            backgroundColor: "transparent",
            borderColor: "white",
            height: "50px",
            width: "100%",
            fontSize: 16,
            color: "white",
            lineHeight: "45px",
        }],
        dropdown: [{
            color: "white",
            fontSize: 16,
            "&:hover .ms-Dropdown-titleIsPlaceHolder": {
                backgroundColor: "transparent",
                color: "white",
            },
            "&:hover .ms-Dropdown-title": {
                color: "white",
                backgroundColor: "transparent",
                borderColor: "white",
            },
            "&:focus .ms-Dropdown-title": {
                color: "white",
            },
            "&:active .ms-Dropdown-titleIsPlaceHolder": {
                color: "white",
            },
            "&:focus .ms-Dropdown-titleIsPlaceHolder": {
                color: "white",
            },
        }],
        caretDown: {
            paddingTop: "10px",
            color: "white !important",
        },
        // 新增：设置下拉弹出面板的背景与边框
        callout: {
            backgroundColor: "#000",
            borderColor: "#333", // 可选：调整边框颜色避免与黑色背景融合
            borderRadius: "5px",
        },
        // 新增：确保选项列表背景与面板一致
        optionsContainer: {
            backgroundColor: "#000",
        },
        // 新增：单个选项的全状态样式适配
        option: {
            color: "white",
            backgroundColor: "#000",
            "&:hover": {
                backgroundColor: "#333", // hover时的深色背景，保证交互反馈
                color: "white",
            },
            "&:focus": {
                backgroundColor: "#333",
                color: "white",
            },
            "&.ms-Dropdown-optionIsSelected": {
                backgroundColor: "#444", // 选中状态的背景，区分于默认状态
                color: "white",
            },
        },
        // 可选：若存在分割线，调整颜色适配黑色背景
        divider: {
            backgroundColor: "#333",
        }
    };
    return chkStyles
};

关键修改说明： #

• callout：控制下拉弹出的整个面板容器，直接设置黑色背景，同时调整边框颜色避免视觉融合。
• optionsContainer：确保选项列表区域的背景与外层面板保持一致。
• option：覆盖单个选项的默认、hover、选中状态样式，保证黑色背景下的文字可读性与交互反馈清晰。
• divider（可选）：如果你的Dropdown包含分割线，调整其颜色适配黑色背景体系。

修改后，Dropdown的下拉面板将显示为黑色背景，同时选项的交互状态也能保持良好的视觉体验。

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