使用React样式组件设置自定义光标图像
提问于 2020-11-10 10:03:23
当光标悬停在特定元素上时，我正在尝试设置自定义光标图像。我试着将我的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
回答 1
Stack Overflow用户
发布于 2021-10-24 04:27:37
const HStyles = styled.h3`
cursor: url("images/pen-tool.svg");
`;样式化组件是CSS-in-JS。你不能写像"images/pen-tool.svg“这样的声明，而且必须从import调用变量。
只需导入图像/pen-tool.svg，并将其命名为：
import penTool from "./images/pen-tool.svg";
const HStyles = styled.h3`
cursor: url(${HStyles}), auto;
`;别忘了"auto“
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64766741
复制相关文章
腾讯云开发者
