Tailoring the Material-UI Card Component

Create a mobile responsive card and configure card header, content, and footer background color

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

Creating a mobile responsive 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. )

Ugly colors. Cool component.

This Card component is created from three subcomponents.

• Material-UI Card Header
• Material-UI Card Content
• Material-UI 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).

The CardHeader has several 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/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.

If you want to learn React, this is the best book I have found so far (Affiliate links incoming! 😱): The Road to React by Robin Wieruch. Don’t just read it, complete the code tutorials as well.

Another good one is React Explained by Zac Gordon. Both of these books have great code tutorials and are aimed at devs who are trying to build a solid foundation of React knowledge.

Now back to the code ;)

Adding 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.

Resources:

See all of my Material-UI articles (for free) here: https://smartdevpreneur.com/

Expand your JavaScript knowledge with these 50 difficult JavaScript questions!

Code Sandbox:

This site has an incredible amount of example Card customizations:

Mui Treasury - Predefined Material UI Components

Docs:

React Card component - Material-UI