Javascript 如何使用材质ui从对象数组中设置样式

我正在使用reactjs的功能组件。我有一个指定样式的对象数组

const data = [
        {
            id: 1,
            color: '#000'
        },
        {
            id: 2,
            color: '#fff'
        }
        // etc
    ]

我需要在页面上呈现尽可能多的元素，因为数据数组中有对象，每个元素都有自己独特的颜色（第一个元素从第一个对象获取颜色，第二个元素从第二个对象获取颜色，等等）

为此，我使用来自材质ui的自定义钩子useStyles

const useStyles = makeStyles((theme) => ({
    divColor: {
        background: data.map((el) => (
            el.color
        )
        )
    }
}));

我像这样展开HTML部分本身

{data.map((el, index) => <div key={index} className={classes.divColor} />)}

---

我哪里出错了？

这是因为.map始终返回数组，因此divColor属性等于：

['#000', '#fff']

我要做的是：

{marksId.map((el, index) => <div key={index} style={{ background: data[index].color }}>)}

{marksId.map（（el，index）=>）}

---

这样，第一个标记将获得数组中的第一种颜色，依此类推，在本例中，将单词“makeStyles”的第一个字母写入className。第一个div的类名是“m”，第二个div的类名是“a”，等等，糟糕，我会更新我的答案。我不会在这种情况下使用useStyle，而是像这样做一些内联CSS：它看起来很有效。非常感谢你！

{marksId.map((el, index) => <div key={index} style={{ background: data[index].color }}>)}