Introduce the color prop for the Card component

[IgnusG]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

Seems like the Card component never had color support but a lot of other similar interactive and non-interactive (including presentational) components do (like Button, AppBar, Checkbox, Chip).

Examples 🌈

Using something like <Card color="primary" /> to style the card similarly to AppBar would provide additional flexibility to developers.

Imagine a dashboard with cards that showcase information with different levels of importance such as this example borrowed from horizon-ui. You can see 2 main colors being used: a default white one (the standard for MUI as well) and a more prominent purple one (would most likely correspond to the primary palette option in most MUI themes.

Motivation 🔦

In this commit the documentation regarding colors was improved to highlight that component's color can be modified through the defined color prop in combination with the theme palette.

In that commit the CardPropsColorOverrides was marked for removal as it's been erroneously added in this commit without actually being used in any of the types.

I don't think this color handling was ever implemented for the card and it would be a great addition to complement such a key component as is the card when building dashboards. The existing overridable prop interface could be left and the color handling could instead be introduced as an additional feature.

[ZeeshanTamboli]

Through introducing color prop, do you mean changing the background-color of the Card surface layer similarly to the AppBar? If yes, we can mark this issue as a "new feature".

---

Joy UI does support the color prop in the Card component: https://mui.com/joy-ui/react-card/.

[IgnusG]

Through introducing color prop, do you mean changing the background-color of the Card surface layer similarly to the AppBar?

Hmm I think I'd expect it to map to the text color as well similar to the button.

But if that's not possible, as long as it's an actual prop like <Card color="primary" /> that could be customized in terms of types (the deprecated interface I mentioned could be used here) and functionality (through the theme style variants), that would also be great! 🙂

[siriwatknp]

There is no guideline about colors for Card in Material Design 2.

I'd say that we will add the colors to Card for @mui/material-next (Material Design 3) but not @mui/material