title: How to specify custom mouse cursor with JSX style
body: <p>How can I specify a custom mouse cursor using a JSX inline style?</p>
  
  <p>This works fine:</p>
  
  <pre><code>&lt;Component
   style={{ cursor: 'crosshair' }}
  /&gt;
  </code></pre>
  
  <p>but I cannot seem to get anything along the lines of</p>
  
  <pre><code>&lt;Component
   style={{ cursor: 'url(images/special.cur)' }}
  /&gt;
  </code></pre>
  
  <p>to work.  Elsewhere I am successfully getting static images from the same location </p>
  
  <pre><code>&lt;img
   src="images/example.png"
  /&gt;
  </code></pre>
  
  <p>so I believe the server is set up properly.  </p>
  
  <p>I've tried Chrome, Firefox, and IE 11.</p>
  
  <p>I know must be doing something fundamentally wrong.  How do I do this?</p>
  
  <p>Thanks very much!</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>(StackOverflow seems not to approve of the continued comment thread so let me address Josh's latest point as an edit instead.)</p>
  
  <p>Yes, a plain HTML element gets the custom cursor.  I agree it must be a syntax problem, but what is the <em>correct</em> syntax for <code>cursor: url(file)</code> in JSX?  That is what I'm trying to figure out.  Thanks again!</p>
  
  <pre><code>&lt;body&gt;
      &lt;input style="cursor: url(images/special.cur),auto;" type="img" src="images/example.png" /&gt;    
      &lt;div id="container"&gt;&lt;/div&gt;
  ...
  &lt;/body&gt;
  </code></pre>
  
  <p>where the <code>&lt;input&gt;</code> gets my special cursor and the "container" <code>&lt;div&gt;</code> is where my React components are rendered.</p>
  
  <p>I also realize that I hadn't mentioned before that I am using React-Bootstrap components for my interface.  I know that Bootstrap adds lots of styles but I wouldn't think they would "win" in this case, would they?</p>