在 React.js 中為數組的不同值設置樣式

Question

我有一個從 API 獲取數據的數組，但我想為每個按鈕設置不同的樣式，以便背景顏色不同。 我也在使用 Material UI ......這是我的代碼 -

{options.map((data, id) => (
 <Button className='p-3 md:w-[25wh] md:h-[25vh]' onClick={handleClickAnswer} fullWidth variant="contained">{decode(data)}</Button>
))}

請告訴我如何設計它們

Answer 1

您可以通過多種方式將不同的 styles 分配給不同的按鈕。 它可以主要使用字符串文字來完成。

幾個例子，

1. 如果您使用的是 bootstrap/tailwind 並且您的樣式主要由它組成，那么您可以使用類似

 {options.map((data, id) => ( <Button className=`p-${id} md:w-[25wh] md:h-[25vh]` onClick={handleClickAnswer} fullWidth variant="contained"> {decode(data)} </Button> ))}

注意 p-${id} 將針對數組中的每個特定元素進行修改

2. 即使不使用引導程序，您也可以使用上述方法，創建自定義類名，將 styles 分別分配給每個按鈕。
3. 如果您需要專門為第一個/最后一個元素分配樣式，可以使用第一個子選擇器（或）最后一個子選擇器。