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

Question

我想更改一些项目的背景颜色、边框半径等，但我该怎么做？

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

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

这是我的代码，在 antd 的文档中只有 key、icon、children 和 label。

Answer 1

您只需将项目放入

Menu.Item

子组件中即可。

尝试使用以下代码：

{items1.map((item) => (
    <Menu.Item
      key={item.key}
      style={{
        borderRadius: '10px',
        backgroundColor: item.key === 'Personal' ? '#B039CC' : 'transparent',
      }}
    >
      {item.label}
    </Menu.Item>
  ))}