在 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. 如果您需要专门为第一个/最后一个元素分配样式，可以使用第一个子选择器（或）最后一个子选择器。