Search code examples
reactjsantd

How to customize each Menu Item in Antd v5+ in React?

I want to change some of the items's background color, border radius, etc but how do I do it?

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' }}
            />

This is my code and in the antd's docs there's only key, icon, children, and label.

Solution 
  • const items1: MenuProps['items'] = ['Personal', 'Bisnis', 'Masuk'].map((key) => ({
key,
label: `${key}`,
style: {
    display: "flex",
    alignItems: "center",
    backgroundColor: key === "Personal" ? "black" : (key === "Bisnis" ? "red" : ""),
    borderRadius: "40px",
    margin: "10px",
    width: "100px",
    height: "40px"
}

    Solved! I can just add the style or className on my item props