如何使用 material-ui 從對象數組中設置樣式

Question

我正在使用 reactjs 的功能組件。 我有一個對象數組，其中指定了 styles

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

我需要在頁面上渲染與數據數組中的對象一樣多的元素，並且每個元素都有自己獨特的顏色（第一個元素從第一個 object 獲得顏色，第二個從第二個獲得顏色，等等）。

為此，我使用來自 material-ui 的自定義鈎子 useStyles。

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

我像這樣擴展 HTML 部分本身

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

在這種情況下，我有 2 個相同的 div 元素，具有相同的屬性

.makeStyles-startAccident-4 {
    background: #000, #fff;
}

CodeSandBox 示例

我在哪里 go 錯了？

Answer 1

這是因為 .map 總是返回一個數組，這樣做的 divColor 屬性等於：

['#000', '#fff']

我要做的是：

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

這樣做，第一個標記將獲得數組中的第一個顏色，依此類推