开发Azure DevOps扩展：自定义<MenuButton>组件外观

完全可以通过Azure DevOps UI库结合自定义样式实现你的需求，无需额外引入其他方案，以下是针对每个需求的具体实现方式：

1. 缩小按钮尺寸 #

你当前的外层div已经限制了25x25的范围，但MenuButton默认带有内边距，会导致按钮内容显示异常。可以通过自定义CSS类覆盖默认内边距，同时调整图标大小：

.custom-menu-button {
  padding: 0 !important;
}
.custom-menu-button .ms-Icon {
  font-size: 16px; /* 按需调整图标大小 */
}

给MenuButton添加这个className，同时移除full-size类（避免强制占满容器导致的额外间距）：

<MenuButton
  className="custom-menu-button"
  // 其他属性...
/>

2. 鼠标悬停/离开时改变颜色 #

利用CSS伪类:hover即可实现，配合自定义类修改图标颜色：

.custom-menu-button:hover .ms-Icon {
  color: #0078d4; /* Azure DevOps主题色，可自定义 */
}
/* 如需移除默认hover背景，可追加 */
.custom-menu-button:hover {
  background-color: transparent !important;
}

如果需要更复杂的状态控制，也可以通过React状态管理实现：

const [isHovered, setIsHovered] = useState(false);

// ...

<MenuButton
  onMouseEnter={() => setIsHovered(true)}
  onMouseLeave={() => setIsHovered(false)}
  className={`custom-menu-button ${isHovered ? "hovered" : ""}`}
  // 其他属性...
/>

对应的CSS：

.custom-menu-button.hovered .ms-Icon {
  color: #0078d4;
}

3. 移除Chevron下拉图标 #

MenuButton默认会显示右侧的Chevron图标，通过设置menuIconProps为undefined即可隐藏：

<MenuButton
  menuIconProps={undefined}
  // 其他属性...
/>

如果此方式不生效，也可以通过CSS强制隐藏该元素：

.custom-menu-button .ms-MenuButton-chevron {
  display: none !important;
}

完整修改后的代码示例 #

import { useState } from "react";
import { IMenuItem, MenuButton } from "azure-devops-ui/Menu";

// 自定义样式（可放在单独的CSS文件中）
const styles = `
.custom-menu-button {
  padding: 0 !important;
}
.custom-menu-button .ms-Icon {
  font-size: 16px;
  color: #666; /* 默认颜色 */
}
.custom-menu-button:hover .ms-Icon {
  color: #0078d4; /* hover时的颜色 */
}
.custom-menu-button .ms-MenuButton-chevron {
  display: none !important;
}
`;

const CardMoreButton = ({ menuItems, handleMenuActivate }) => {
  // 如需状态管理hover，保留以下代码，否则可删除
  // const [isHovered, setIsHovered] = useState(false);

  return (
    <>
      <style>{styles}</style>
      <div style={{ width: "25px", height: "25px", position: "absolute", top: "3px", right: "3px", display: "flex", alignItems: "center", justifyContent: "center" }}>
        <MenuButton
          subtle={true}
          iconProps={{ iconName: "More" }}
          className="custom-menu-button"
          menuIconProps={undefined}
          // onMouseEnter={() => setIsHovered(true)}
          // onMouseLeave={() => setIsHovered(false)}
          contextualMenuProps={{
            menuProps: {
              items: menuItems,
              onActivate: handleMenuActivate,
              id: "cardSelectionMenu",
            },
          }}
        />
      </div>
    </>
  );
};

export default CardMoreButton;

注意：外层div需添加display: flex和alignItems: center，确保图标在容器中居中显示，之前的代码缺少该属性可能导致图标位置偏移。

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