css - 使用 React 样式组件设置自定义光标图像

Question

我试图在悬停在特定元素上时设置自定义光标图像。我试过将我的 svg 图标放在 src 文件夹中，并在样式组件中将其称为

const HStyles = styled.h3`
   cursor: url("images/pen-tool.svg");
 `;

但它不会将光标更改为笔图像。我也试过

 cursor: url('images/pen-tool.svg'),
  url('images/pen-tool.cur');

cursor: url('images/pen-tool.svg'),
  move;

我的 svg 在其 svg 标签中定义了宽度和高度，但仍然无效。我在这里错过了什么吗？您可以查看我的代码沙箱示例 here

Answer 1

const HStyles = styled.h3`
   cursor: url("images/pen-tool.svg");
 `;

样式化组件是 CSS-in-JS。你不能写像“images/pen-tool.svg”这样的声明并且必须从导入中调用变量。

只需导入 images/pen-tool.svg 并像这样调用它:

import penTool from "./images/pen-tool.svg";

const HStyles = styled.h3`
  cursor: url(${HStyles}), auto;
`;

别忘了“自动”