如何让MUI Typography组件hover时显示自定义图片光标？

问题修复方案 #

• 调整路径引用方式
  若图片放在public文件夹下，直接使用绝对路径更可靠，避免webpack编译路径的影响：

  <Typography
    sx={{
      "&:hover": { cursor: "url(/JavaScript-logo.png), auto" },
    }}
  >
    ["JavaScript",
  </Typography>
  

  要是图片在public的子文件夹（比如public/cursors），路径要写成/cursors/JavaScript-logo.png。

• 检查光标图片合规性
  浏览器对自定义光标有尺寸限制（建议控制在32x32px以内），图片过大的话会被浏览器忽略，自动用默认光标。同时要确保图片格式为PNG、GIF或CUR这类浏览器支持的格式。

• 修正语法细节
  必须保留auto作为 fallback 选项，这是浏览器的备选机制；如果用import引入图片，尝试给路径添加引号包裹：

  <Typography
    sx={{
      "&:hover": { cursor: `url("${logo}"), auto` },
    }}
  >
    ["JavaScript",
  </Typography>
  

• 验证路径有效性
  打开浏览器开发者工具的Elements面板，查看该元素的cursor样式，确认路径是否返回404。如果路径错误，调整图片存放位置或引用路径即可。

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