Material-UI Card Custom Background Color, Header, Content, and Footer

Card components are a common UI building block, and they need to be versatile and customizable to handle a variety of needs. React Material-UI Cards have a significant capacity to be tailored to fit your needs.

In this demo we’ll create a mobile responsive card and configure the card header, content, and footer background color.

Table of Contents hide

1 Creating a Mobile Responsive Material-UI Card

2 Material-UI Card Background Color

3 Resources:

Creating a Mobile Responsive Material-UI Card

We’ll start with the JSX, then dive into targeting css classes on different card subcomponents. (Ignore the garish colors. I made every section different to demonstrate the Material-UI style API. )

Styled Mobile Responsive Material-UI Card — Ugly colors. Cool component.

This Card component is created from three subcomponents.

Card Header
Card Content
Card Footer (aka a div)

The Card Header and Card Content are actual Material-UI components and they have an API and internal CSS properties. This gives them significant built-in options for creating the card you want.

The Card Footer is simply a div. There is currently not a Material-UI Card Footer component.

Here’s the JSX. I’ll dive into the classes in a bit.

<Card className={classes.root}>
  <CardHeader
    className={classes.header}
    component={Typography}
    title={"Header Text"}
    subheader={"Subtitle Text"}
  />
  <CardContent className={classes.content}>
    <div className={`${classes.contentItem} ${classes.textContent}`}>
      <div>Content 1</div>
      <div>Content 2</div>
    </div>
    <div className={classes.contentItem}>
      <img src="https://picsum.photos/200" />
    </div>
  </CardContent>
  <div className={classes.footer}>
    <Typography>Footer Text</Typography>
  </div>
</Card>

The JSX is pretty simple – a Card component wraps three siblings (<CardHeader>, <CardContent>, and <div>acting as a footer). If you need to mask the content of the whole Card, consider using the Backdrop component.

The CardHeader has props such as title and subheader for quick configuration. These sections of the the header have unique css classes applied by Material-UI and can be easily targeted for custom styling. CardContent also has a unique class that can be targeted.

There are two potential options for making this card mobile responsive.

— The first is to change the flexDirection in Card root class to row (it was columnin the first image). The result:

I didn’t design the card around this, but it pretty quickly lays the foundation for a landscape mode design.

— The second is to set the children in CardContent to flex at certain breakpoints, like so:

contentItem: {
  flex: "calc(50% - 4px)",
  "@media (max-width: 500px)": {
    flex: "100%"
  }
}

Unlike the image at the beginning of this article, the two elements/react components with contentItem class are stacked vertically instead of horizontally. With the above flex and media, vertical or horizontal stacking occurs automatically when screen size changes.

Be sure to set the parent<CardContent> to display: flex to ensure flex properties are applied.

Material-UI Card Background Color

There are a couple of ways to properly target a particular card component or subcomponent.

Here’s how I targeted backgroundColor:

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    root: {
      display: "flex",
      minWidth: 320,
      maxWidth: 500,
      flexDirection: "column", //change to row for horizontal layout
      "& .MuiCardHeader-root": {
        backgroundColor: "yellow"
      },
      "& .MuiCardHeader-title": {
        //could also be placed inside header class
        backgroundColor: "#FCFCFC"
      },
      "& .MuiCardHeader-subheader": {
        backgroundImage: "linear-gradient(to bottom right, #090977, #00d4ff);"
      },
      "& .MuiCardContent-root": {
        backgroundImage: "linear-gradient(to bottom right, #00d4ff, #00ff1d);"
      }
    },
//skipping a bit
    header: {},
    footer: {
      fontSize: 14,
      backgroundImage: "linear-gradient(to bottom right, #8c9d9b, #bdcdbf);"
    }
  })
);

Notice that root class is on the <Card> component and within this class, I target subcomponents’ style API. The <Card> component itself doesn’t actually have any background color applied.

An alternative would be to placed the .MuiCardHeader-root, .MuiCardHeader-title, and .MuiCardHeader-subheader JSS inside the header class (currently an empty class). This is arguably better and more specific.

The footer had to be targeted via class because it is ‘outside’ the Material-UI world. Naturally it does not have the same MUI API to access.