'How to change background color in react materialUI card

Hi i want to change background color of card in react materialUI card project. see the attached picture what i am expecting.

Screenshot:

https://stackblitz.com/edit/react-snmhbw

reactjs material-ui

Solution 1:^[1]

You can add an inline style block to your div element that holds the text. So something like this style={{backgroundColor: "red"}}

Solution 2:^[2]

There is no code in your stackblitz. Anyways. Just do.

<Card className={classes.card}>
  <CardContent style={{backgroundColor: "red"}}>
    Your card content..
  </CardContent>

</Card>

Solution 3:^[3]

If you need to change the background color of the cards,

<Card style={{backgroundColor: "red"}}></Card>

Solution 4:^[4]

The nicer way is to set a global theme as described in the MUI documentation and change the theme.palette.background.paper key to the hex value of your desired background color as discussed in this GitHub issue:

Use:

    const theme = createTheme({
        palette: {
          background: {
            paper: '#EFF7FF', // your color
          },
        },
      });

Wrap your app in a <ThemeProvider theme={theme}>.
Just use your <Card> like normal and the color will be changed.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Tony Marfo O
Solution 2	Y M
Solution 3	SandaliTP
Solution 4	palsch

'How to change background color in react materialUI card

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]

Solution 4:^[4]