如何实现MUI DeleteIcon响应式及点击跳转功能？

一、给DeleteIcon添加点击跳转事件 #

根据项目类型选择对应的实现方式：

1. React单页应用（react-router-dom v6+） #

先导入路由钩子：

import { useNavigate } from 'react-router-dom';

在组件内初始化并绑定点击事件：

const navigate = useNavigate();

// ...

<ListItem>
  <ListItemAvatar>
    <Avatar src={sprites.front_default}>
      <ImageIcon />
    </Avatar>
  </ListItemAvatar>
  <ListItemText primary={name} />
  <DeleteIcon 
    onClick={() => navigate('/你的目标页面路径')} 
    sx={{ cursor: 'pointer' }} // 添加上手型指针，提示可点击
  />
</ListItem>

2. 普通多页应用 #

直接通过window.location实现跳转：

<ListItem>
  {/* 其他内容保持不变 */}
  <DeleteIcon 
    onClick={() => window.location.href = '/你的目标页面.html'} 
    sx={{ cursor: 'pointer' }}
  />
</ListItem>

二、实现DeleteIcon的响应式效果 #

利用MUI的sx属性结合断点（xs/sm/md等），可灵活控制图标的大小、显示状态、间距等：

示例1：按屏幕尺寸调整图标大小 #

<DeleteIcon 
  onClick={() => navigate('/你的目标页面路径')}
  sx={{
    cursor: 'pointer',
    fontSize: { xs: 20, sm: 24 } // 小屏幕(<600px)显示20px，大屏幕显示24px
  }}
/>

示例2：小屏幕隐藏图标 #

<DeleteIcon 
  onClick={() => navigate('/你的目标页面路径')}
  sx={{
    cursor: 'pointer',
    display: { xs: 'none', sm: 'block' } // 小屏幕隐藏，大屏幕显示
  }}
/>

示例3：响应式调整间距 #

<DeleteIcon 
  onClick={() => navigate('/你的目标页面路径')}
  sx={{
    cursor: 'pointer',
    marginLeft: { xs: 'auto', sm: '16px' } // 小屏幕自动靠右，大屏幕留16px间距
  }}
/>

完整修改示例（React单页+响应式） #

import { useNavigate } from 'react-router-dom';
import { ListItem, ListItemAvatar, Avatar, ListItemText, DeleteIcon, ImageIcon, Divider } from '@mui/material';

// 组件内部逻辑
const navigate = useNavigate();

return (
  <>
    <ListItem>
      <ListItemAvatar>
        <Avatar src={sprites.front_default}>
          <ImageIcon />
        </Avatar>
      </ListItemAvatar>
      <ListItemText primary={name} />
      <DeleteIcon 
        onClick={() => navigate('/delete-confirm')}
        sx={{
          cursor: 'pointer',
          fontSize: { xs: 20, sm: 24 },
          marginLeft: 'auto'
        }}
      />
    </ListItem>
    <Divider variant="inset" component="li" />
  </>
);

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