Вы можете активировать CSS только с помощью sx реквизита MUI. Чтобы запускать функции, вы можете обернуть свои компоненты Card с помощью div и использовать свойства onMouseEnter и onMouseLeave.

Вот очень простой пример:

  const [myColor, setMyColor] = useState('red');

  <Card sx = {{ maxWidth: 345 }}>
     <div onMouseEnter = {() => setMyColor('green')} onMouseLeave = {() => setMyColor('red')}>
        <CardMedia sx = {{ height: 140, border: '2px dashed', borderColor: myColor }}
        />
     </div>
  </Card>

Я надеюсь, что это помогает.

Симран Сингх прав. Однако пример кода изменяет свойства CSS компонента CardMedia, а вопрос заключается в том, как изменить содержимое самой карты MUI. В приведенном ниже примере изменяется содержимое карты MUI. Это можно увидеть в этой живой демонстрации . Доступен демо репозиторий кода. Основной код компонента приведен ниже.

приложение.jsx

...

import img from './../assets/images/purple.jpg';

const App = () => {

    const [ isHovered, setIsHovered ] = useState( false );
    const project = {
        image: img
    };

    function handleMouseOver() {
        setIsHovered( true );
    }

    function handleMouseOut() {
        setIsHovered( false );
    }

    return (
        <Card sx = {{ width: '360px', height: '250px' }}>
            <CardActionArea
                onMouseOver = { handleMouseOver }
                onMouseOut = { handleMouseOut }
            >
                { isHovered
                    ?     <CardContent sx = { { minHeight: '220px' } } >
                            <CardHeader
                                action = {
                                    <IconButton aria-label = "settings">
                                    <MoreVertIcon />
                                    </IconButton>
                                }
                                title = "My Title"
                                subheader = "All the cool languages"
                            />
                            <Box ml = { 2 }>
                                <Typography variant = "body1" color = "text.primary">
                                    More information...
                                </Typography>
                                <Typography variant = "body1" color = "text.primary">
                                    Description of my cool projects!
                                </Typography>
                            </Box>
                            <CardActions>
                                <IconButton>
                                    { 'Click Me to Learn More!' }
                                    <TouchAppIcon size = { 'large' } />
                                </IconButton>
                            </CardActions>
                        </CardContent>
                    :   <CardMedia
                            sx = {{
                                height: 250,
                                '&:hover': {
                                    '*': 'inherit' // Nope. Code does not go here.
                                },
                             }}
                            image = { project.image }
                            title = "green iguana"
                        />
                }
            </CardActionArea>
        </Card>
    );
};

export default App;

Обновлять

Эффект наведения для нескольких карт

Необходимые изменения находятся в строках кода, показанного ниже.

export default function Projects() {
    const [isHoveredId, setIsHoveredId] = useState( '' );
    let projectList;

    function handleMouseOver( ID ) {
        return () => {
            setIsHoveredId( ID );
        }
    }

    function handleMouseOut() {
         setIsHoveredId( '' );
    }

    if (ScreenDetection() === false) {
        projectList = (
            <div className = "grid grid-cols-2 gap-6 pt-10">
                {projects.map((project) => (
                    <Card sx = {{ width: 1, height: 250 }}>
                        <CardActionArea
                            onMouseOver = {handleMouseOver( project.title )}
                            onMouseOut = {handleMouseOut}
                            href = {project.link}
                            rel = "noopener noreferrer"
                            target = "_blank"
                        >
                            {isHoveredId == project.title ? (