React函数式组件中无法给CSS变量传值，该如何解决？

你的React内联样式写法本身是正确的，没生效大概率是其他环节出了问题，给你几个排查和解决方向：

• 确认CSS中正确引用了自定义变量
  检查.grow-ans相关CSS代码，确保动画逻辑确实通过var(--d)读取这个变量，比如：

  .grow-ans {
    animation: flower-grow var(--d) ease-in-out forwards;
  }
  @keyframes flower-grow {
    /* 原花朵动画的关键帧逻辑 */
  }
  

  要是CSS里没正确调用var(--d)，变量传了也不会起作用。

• 排查样式优先级冲突
  打开浏览器开发者工具，查看这个div的Computed样式面板，确认--d变量是否被正确识别，有没有被其他全局样式或高优先级规则覆盖。

• 尝试更清晰的变量传递方式
  虽然你的写法没问题，但可以试试把值抽成变量，代码可读性更高：

  const animationDuration = '4s';
  <div className="grow-ans" style={{ '--d': animationDuration }}></div>
  

• 确保完整引入原动画的CSS代码
  把原页面中所有花朵相关的CSS（包括动画关键帧、基础布局样式）完整复制到React项目的CSS文件中，再通过import './flower-animation.css'引入，没有样式支撑，动画自然无法运行。

• 检查React版本兼容性
  若你使用的React版本过旧，可能存在自定义CSS变量的兼容问题，建议升级到16.8及以上的稳定版本。

如果按上述步骤排查后仍有问题，可以贴出你的CSS代码片段，方便进一步定位原因。

内容的提问来源于stack exchange，提问作者Sahil Singh Rawat