Javascript 如何使用JSX样式指定自定义鼠标光标_Javascript_Reactjs_React Jsx

Javascript 如何使用JSX样式指定自定义鼠标光标

javascript reactjs

Javascript 如何使用JSX样式指定自定义鼠标光标,javascript,reactjs,react-jsx,Javascript,Reactjs,React Jsx,如何使用JSX内联样式指定自定义鼠标光标这很好： <Component style={{ cursor: 'crosshair' }} /> 其中，获取我的特殊光标，“容器”是呈现我的React组件的地方我还意识到我以前没有提到我正在为我的接口使用React引导组件。我知道Bootstrap增加了很多风格，但我不认为他们会在这种情况下“获胜”，是吗？我相信我已经解决了这个问题。有两件事不对，乔希指出了其中一件。抱歉，如果有人在这方面浪费了太多时间，但请记住：基本问题是，我使

如何使用JSX内联样式指定自定义鼠标光标

这很好：

<Component
 style={{ cursor: 'crosshair' }}
/>

其中，

获取我的特殊光标，“容器”

是呈现我的React组件的地方

我还意识到我以前没有提到我正在为我的接口使用React引导组件。我知道Bootstrap增加了很多风格，但我不认为他们会在这种情况下“获胜”，是吗？

我相信我已经解决了这个问题。有两件事不对，乔希指出了其中一件。抱歉，如果有人在这方面浪费了太多时间，但请记住：

基本问题是，我使用在线图像转换器将图像转换为.cur格式，现在我认为它返回的.cur文件已损坏或不充分

当我按照Josh的建议尝试使用.png格式并使用回退值时，我可以让自定义游标在Chrome和Firefox上工作。我必须找到一些更好的工具为IE创建一个合适的.cur文件，因为它只支持.cur（和.ani）格式。我能够使用我在网上找到的另一个.cur文件，它确实可以与IE一起工作

[我知道我说过我可以在React之外使用带有纯HTML的“.cur不足”文件；我一定是一次尝试了太多的东西。今天我也做不到这一点。很抱歉我的回答有误导性。]

所以JSX不需要任何特殊的东西，除了一个有效的游标图像文件和一个内置的回退游标

<Component
 style={{ cursor: 'url(images/special.png),auto' }}
/>

谢谢。

DOM中的输出是什么？我只看到默认光标。顺便说一句，在我尝试过的浏览器中，开发人员控制台没有出现错误，babelify也没有出现错误。不，我的意思是，你在DOM元素上看到了什么？

style

属性是什么样子的？哦，我明白了。使用Chrome，我看到

光标：auto用于在DOM中生成React的
元素。FWIW，我看到使用React开发者窗口的React组件的道具中有光标：“url（images/special.cur）”
。然而，使用Firefox，我实际上在DOM检查器中看到了cursor:url（images/special.cur）
。如果我读对了，我认为您需要提供一个回退值。尝试url（images/special.cur），改为auto。
<img
 src="images/example.png"
/>

<body>
    <input style="cursor: url(images/special.cur),auto;" type="img" src="images/example.png" />    
    <div id="container"></div>
...
</body>

<Component
 style={{ cursor: 'url(images/special.png),auto' }}
/>