React自定义光标失效：参考教程后仍无法实现项目卡片悬停效果

我正在用React重构个人作品集，原项目里每个项目卡片都有鼠标悬停切换自定义光标的功能，之前实现起来很简单，但现在在React里参考教程后就是不生效。

我的相关代码 #

Portfolio组件代码 #

import React from "react";
import crystal from "./images/crystal2.png";
import PortProject from "./PortProject.js";
import DownProject from "./DownProject.js";
import PortProjectWIP from "./PortProjectWIP.js";
import Brightstar from "./cursors/brightstar.cur"

function Portfolio(){
    return(
        <div>
        <div class = "row">
<div class = "col-sm-1">
</div>

<h1 style={{padding: "5px", display: "inline", borderRadius:"25px"}}>Solo Endeavors</h1>
<hr />
<br />
<br />
</div>

<div class="row">
  <div class = "col-sm-2"></div>
 
  <PortProject caption = "Crystal Game" style = {{cursor: "url(" + Brightstar + "), auto"}} link = "https://dennismarkham.github.io/week-4-game/" 
  langs = "HTML, CSS, Javascript, JQuery, local storage, SASS" alt = "Crystal Game" 
  image = "https://dennismarkham.github.io/ConceptPortfolio/images/crystal.png" />

PortProject组件代码 #

import React from "react";

function PortProject(props){
    return(
<div class="col-sm-4">
    <div class="thumbnail" data-toggle="tool-tip" title={props.langs}>
      <a href={props.link}>
        <img style = {{height: "250px"}} src={props.image} alt={props.alt}
        />
        <div class="caption">
          <p>{props.caption}</p>
        </div>
      </a>
    </div>
  </div>

        )
}
export default PortProject;

问题原因与解决方案 #

核心问题 #

你给PortProject组件传递了style属性，但组件内部没有接收并应用这个样式，导致自定义光标规则根本没生效。另外React中应该用className替代class，这是规范问题。

修改后的代码 #

1. 更新PortProject组件

接收并应用传入的style属性，同时替换class为className：

import React from "react";

function PortProject(props){
    return(
<div className="col-sm-4">
    <div className="thumbnail" data-toggle="tool-tip" title={props.langs} style={props.style}>
      <a href={props.link}>
        <img style={{height: "250px"}} src={props.image} alt={props.alt} />
        <div className="caption">
          <p>{props.caption}</p>
        </div>
      </a>
    </div>
  </div>
    )
}
export default PortProject;

2. 优化Portfolio组件中的style写法

用ES6模板字符串简化光标路径拼接：

<PortProject 
  caption="Crystal Game" 
  style={{cursor: `url(${Brightstar}), auto`}} 
  link="https://dennismarkham.github.io/week-4-game/" 
  langs="HTML, CSS, Javascript, JQuery, local storage, SASS" 
  alt="Crystal Game" 
  image="https://dennismarkham.github.io/ConceptPortfolio/images/crystal.png" 
/>

额外注意事项 #

• 确认brightstar.cur文件路径正确，React中import的资源会被打包工具处理，路径无误的话就能正常引用。
• 如果仍不生效，可尝试添加光标热点坐标（如url(${Brightstar}) 16 16, auto），帮助浏览器定位光标显示位置。
• 部分浏览器对.cur格式支持有限，可尝试转换为.png格式测试。

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