如何在React中自定义Antd v5+的每个菜单项？

架构老林

2026-7-1

方法1：直接给指定菜单项添加inline样式

利用菜单项支持的style属性（属于React元素通用属性，文档未单独列出但可直接使用），针对特定key的项设置样式：

const items1: MenuProps['items'] = ['Personal', 'Bisnis', 'Masuk'].map((key) => {
  const baseProps = { key, label: `${key}` };
  // 给'Masuk'项单独设置样式
  if (key === 'Masuk') {
    baseProps.style = {
      backgroundColor: '#165DFF',
      borderRadius: '8px',
      padding: '0 16px',
      color: '#fff'
    };
  }
  return baseProps;
});

<Menu
  theme="dark"
  mode="horizontal"
  items={items1}
  style={{ flex: 1, minWidth: 0, justifyContent: 'end', background: 'transparent', color: 'white' }}
/>

方法2：使用自定义类名+全局CSS

适合需要定制hover、active等复杂状态样式的场景：

首先给目标菜单项添加自定义类名：

const items1: MenuProps['items'] = ['Personal', 'Bisnis', 'Masuk'].map((key) => ({
  key,
  label: `${key}`,
  className: key === 'Masuk' ? 'special-menu-item' : ''
}));

然后在全局CSS文件中编写样式（部分场景需要!important覆盖Antd默认样式）：

.special-menu-item {
  background-color: #165DFF !important;
  border-radius: 8px !important;
  color: #fff !important;
}

/* 鼠标悬停时的样式 */
.special-menu-item:hover {
  background-color: #4080FF !important;
}

方法3：自定义Label渲染

通过将label替换为带样式的容器，更灵活控制显示区域：

const items1: MenuProps['items'] = ['Personal', 'Bisnis', 'Masuk'].map((key) => ({
  key,
  label: (
    <div 
      style={{
        padding: '8px 16px',
        borderRadius: key === 'Masuk' ? '8px' : '0',
        backgroundColor: key === 'Masuk' ? '#165DFF' : 'transparent',
        color: key === 'Masuk' ? '#fff' : 'inherit'
      }}
    >
      {key}
    </div>
  )
}));