-1

I have an array that is getting data from an API, but I want to style each button differently so that the background colours differ. I am also using Material UI... Here is my code -

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

Please tell me how to style them

Anonymous0501
  • 21
  • 5

1 Answers1

0

There are several ways in which you can assign different styles to different buttons. It can be done majorly using string literals.

Few examples,

  1. If you are using bootstrap/tailwind and your styling will majorly consist of that, then you can something like

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

Notice p-${id} would get modified for each particular element in the array

  1. Even if bootstrap isn't being used, you can use the above method, create custom classNames to assign styles to each button separately.
  2. If you need to specifically assign a style to the first/last element, you can use first child selector (or) last child selector.
illuminaughty
  • 51
  • 3
  • I am using Material UI and trying to add a background colour to each button... Any way to do that? – Anonymous0501 Sep 02 '22 at 15:33
  • You can create an object map, based on `color` prop mentioned [here](https://mui.com/material-ui/api/button/) and pass the object as mentioned above. – illuminaughty Sep 06 '22 at 05:56