如何在Material UI中渲染背景色各不相同的按钮？

问题背景 #

我有一个包含样式与内容的MUI按钮组件，希望每次调用该组件生成按钮时，每个按钮都拥有不同的背景色。曾尝试通过sx传递backgroundColor属性但无效，考虑用给定的颜色数组循环赋值，但不确定具体实现方式，目标是让按钮呈现不同深色系背景的效果。

实现思路 #

1. 给按钮组件新增colorIndex属性，用于指定颜色数组的下标
2. 将颜色数组提取到组件外部，避免重复创建，提升性能
3. 在调用组件时，通过遍历按钮数据自动传递不同的colorIndex，确保每个按钮取到不同颜色

修改后的代码 #

按钮组件（ItemsCategoryButton.jsx） #

import * as React from "react";
import Button from "@mui/material/Button";
import Typography from "@mui/material/Typography";

// 提取颜色数组到组件外部，复用且优化性能
const buttonColors = [
  "#402C2C",
  "#402C3D",
  "#392C40",
  "#2C3740",
  "#2C403D",
  "#2C4035",
  "#31402C",
  "#3D402C",
  "#40392C",
  "#402C2C",
  "#402C3D",
  "#2C3740",
  "#2C4035",
  "#3D402C",
  "#402C2C",
];

export default function ItemsCategoryButton({ title, price, availables, colorIndex = 0 }) {
  // 取对应下标颜色，超出数组长度时自动循环
  const bgColor = buttonColors[colorIndex % buttonColors.length];

  return (
    <Button
      variant="contained"
      className="itemButton"
      sx={{
        display: "block",
        mt: -3.8,
        ml: 1,
        width: 160,
        height: 115,
        textTransform: "none",
        borderRadius: 3,
        bgcolor: bgColor,
        // 保持hover时颜色一致，避免MUI默认样式覆盖
        "&:hover": {
          bgcolor: bgColor,
        }
      }}
    >
      <Typography sx={{ fontFamily: "Barlow Condensed", fontSize: "20px" }}>
        {title}
      </Typography>
      <Typography sx={{ fontFamily: "Barlow Condensed", fontSize: "14px" }}>
        Php {price}
      </Typography>
      <Typography sx={{ fontFamily: "Barlow Condensed", fontSize: "14px" }}>
        {availables} available
      </Typography>
    </Button>
  );
}

调用组件（MultipleButtons.jsx） #

import * as React from "react";
import ItemsCategoryButton from "./ItemsCategoryButton";

// 将按钮数据整理为数组，便于遍历维护
const buttonData = [
  { title: "Buffalo Wings", price: "200.00", availables: "20" },
  { title: "Battered Chicken (Half)", price: "195.00", availables: "20" },
  { title: "Battered Chicken (Whole)", price: "380.00", availables: "20" },
  { title: "Garlic Chicken (Half)", price: "210.00", availables: "20" },
  { title: "Garlic Chicken (Whole)", price: "400.00", availables: "20" },
];

export default function MultipleButtons() {
  return (
    <div>
      {buttonData.map((item, index) => (
        <ItemsCategoryButton
          key={item.title} // 用唯一的title作为key，比index更稳定
          title={item.title}
          price={item.price}
          availables={item.availables}
          colorIndex={index}
        />
      ))}
    </div>
  );
}

展示组件（App.jsx） #

import "./styles.css";
import MultipleButtons from "./MultipleButtons";

export default function App() {
  return (
    <div className="App">
      <MultipleButtons />
    </div>
  );
}

关键点说明 #

• 用colorIndex % buttonColors.length确保按钮数量超过颜色数组长度时，自动循环取色
• 给按钮的&:hover样式指定相同的背景色，避免MUI默认的hover样式覆盖自定义背景色
• 将按钮数据整理为数组后用map遍历，减少重复代码，后续新增按钮只需在数组中添加数据即可

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