How to change background color in react MUI card-CodePudding

I am new to React.
I am using the map function with the days of the week as an array.

I want to change backGroundColor of 'SUN' and 'SAT' with MUI Card components.

This is an Array "the days of the week."

['SUN','MON','TUE','WED','THU','FRI','SAT']

This is a code.

const dayOfWeek = ['SUN','MON','TUE','WED','THU','FRI','SAT'];
const cardstyle = {
 margin : 1
};

<ImageList col={7} rowHeight={80}>
}
 dayOfWeek.map((w) => {
  const style = {};
  return (
   <ImageListItem key = {w}>
    <Card style={cardstyle}>
     <CardContent><Typography style={style}>{w}</Typography></CardContent>
    </Card>
   </ImageListItem>
  )
 })
}

Please let me know.
Thank you.

CodePudding user response：

I adjusted your code and made this example:

import React from 'react';
import { ImageList, ImageListItem } from '@material-ui/core';
import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';
import Typography from '@material-ui/core/Typography';

const dayOfWeek = ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'];
const cardstyle = {
  margin: 1,
};

export function App() {
  return (
    <div>
      <ImageList col={7} rowHeight={80}>
        {dayOfWeek.map((w) => {
          let bgColor = '#ffffff';
          if (w === 'SUN') bgColor = '#ffcccc';
          if (w === 'SAT') bgColor = '#0fcccc';

          return (
            <ImageListItem key={w}>
              <Card style={{ ...cardstyle, backgroundColor: bgColor }}>
                <CardContent><Typography>{w}</Typography></CardContent>
              </Card>
            </ImageListItem>
          )
        })}
      </ImageList>
    </div>
  );
}

This will change Card component to a different background colors as defined.

Here's another cleaner version using makeStyles styles , also fixed spelling for cols:

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import { ImageList, ImageListItem } from '@material-ui/core';
import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';
import Typography from '@material-ui/core/Typography';

const useStyles = makeStyles((theme) => ({
  card: {
    margin: 1,
    color: theme.palette.primary.contrastText,
  },
  sun: {
    backgroundColor: '#ffcccc',
  },
  sat: {
    backgroundColor: '#0fcccc',
  },
}));

const dayOfWeek = ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'];

export function App() {
  const classes = useStyles();

  const bgClasses = {
    SUN: classes.sun,
    SAT: classes.sat,
  };

  return (
    <div>
      <ImageList cols={7} rowHeight={80}>
        {dayOfWeek.map((w) => {
          const bgClass = bgClasses[w] || null;

          return (
            <ImageListItem key={w}>
              <Card className={`${classes.card} ${bgClass}`}>
                <CardContent>
                  <Typography>{w}</Typography>
                </CardContent>
              </Card>
            </ImageListItem>
          );
        })}
      </ImageList>
    </div>
  );
}