实现MUI Card响应式点击：移动端全卡片可点，桌面端仅按钮可点

要实现移动端卡片可点击、桌面端仅按钮可点击的需求，你可以通过以下两种方式处理CardActionArea的点击权限：

方法一：使用MUI的useMediaQuery动态控制点击事件 #

利用MUI的媒体查询钩子，直接根据屏幕尺寸决定是否给CardActionArea绑定点击事件，这是最符合React组件逻辑的方式：

import { useMediaQuery } from '@mui/material/styles';
import Card from '@mui/material/Card';
import CardActionArea from '@mui/material/CardActionArea';
import CardContent from '@mui/material/CardContent';
import CardActions from '@mui/material/CardActions';
import Button from '@mui/material/Button';
import Typography from '@mui/material/Typography';

const MyCard = () => {
    const handleClick = () => {
        console.log("Clicked!")
    };
    
    // 检测是否为桌面端（和你的CSS断点保持一致：900px）
    const isDesktop = useMediaQuery('(min-width:900px)');

    return (
        <Card>
            {/* 桌面端不绑定onClick，移动端绑定 */}
            <CardActionArea 
                onClick={isDesktop ? undefined : handleClick}
                {/* 可选：桌面端添加不可点击的视觉反馈 */}
                sx={{
                    cursor: isDesktop ? 'default' : 'pointer'
                }}
            >
                <CardContent>
                    <Typography>My Title</Typography>
                </CardContent>
            </CardActionArea>
            <CardActions className="click-me-button">
                <Button onClick={handleClick}>Click me!</Button>
            </CardActions>
        </Card>
    )
}

方法二：通过CSS媒体查询禁用点击事件 #

如果你更倾向于用纯CSS解决，可以给CardActionArea添加类名，通过pointer-events: none在桌面端禁用点击：

修改JSX代码： #

const MyCard = () => {
    const handleClick = () => {
        console.log("Clicked!")
    };
    
    return (
        <Card>
            {/* 添加自定义类名 */}
            <CardActionArea 
                className="card-action-area"
                onClick={handleClick}
            >
                <CardContent>
                    <Typography>My Title</Typography>
                </CardContent>
            </CardActionArea>
            <CardActions className="click-me-button">
                <Button onClick={handleClick}>Click me!</Button>
            </CardActions>
        </Card>
    )
}

更新CSS代码： #

.click-me-button {
    display: none;
 
    @media only screen and (min-width: 900px) {
        display: block;
    }
}

.card-action-area {
    cursor: pointer;

    /* 桌面端禁用点击并修改光标样式 */
    @media only screen and (min-width: 900px) {
        pointer-events: none;
        cursor: default;
    }
}

两种方案都能实现你的需求，方法一更贴合React的组件状态管理，方法二更适合纯样式驱动的场景，你可以根据自己的习惯选择。

内容的提问来源于stack exchange，提问作者noblerare