[CardActionArea] Add an Active Prop

[aress31]

Summary

It would be great to introduce an active prop, similar to the Tabs component, for CardActionArea to support clickable Card components. Currently, my workaround looks like this:

      <CardActionArea
        onClick={() => onClick(resource)}
        sx={{
          backgroundColor: selected ? "action.selected" : "transparent",
          "&:hover": {
            backgroundColor: selected ? "action.selectedHover" : "action.hover",
          },
        }}
      >

However, adding an active prop would provide better consistency across components, especially since CardActionArea is often used for interactive cards and may need to visually indicate its active state.

Examples

See above.

Motivation

See above.

Search keywords: cardactionarea, active

[siriwatknp]

Thanks for the feedback but I think this should be done from the user side because the active styles are varied between projects. It could be just background, or border, or box-shadow.

What we could do is adding a demo to show how to properly style the active state. Based on your code, I'd recommend this instead:

<CardActionArea
    onClick={() => onClick(resource)}
    data-active={selected ? "" : undefined}
    sx={{
      '&[data-active]': {
        backgroundColor: 'action.selected',
        '&:hover': {
          backgroundColor: 'action.selectedHover',
        }
      }
    }}
  >

Do you want to open a PR?

[aress31]

@siriwatknp adding this use-case to the documentation would indeed help! Can you point me to the relevant file to change?

[mj12albert]

@aress31 See this doc for steps to add a new demo: https://github.com/mui/material-ui/blob/master/CONTRIBUTING.md#how-to-add-a-new-demo-to-the-docs

[aress31]

Alright it will be quicker and easier if you guys do the PR - so I will sit it out.

[DiegoAndai]

@aress31 this probably won't be prioritized from our side, so I would encourage you to work on a PR. I would be happy to guide you.

[siddhantantil39]

Hi @DiegoAndai I would wanna work on this, can you please guide me on how to work on this PR?

[siriwatknp]

Hi @DiegoAndai I would wanna work on this, can you please guide me on how to work on this PR?

Please follow the contributing guide.

You can add the new demo to /docs/data/material/components/cards/cards.md

[siddhantantil39]

Hi @siriwatknp I have raised a PR for the issue: #44789.
Can anyone please review it also. Thanks