本文详解 react 函数组件中向 css 自定义属性（css variables）传值的正确方式，包括 camelcase 命名规范、style 对象写法、css 中的引用方法，并附可运行示例与常见误区提醒。
本文详解 react 函数组件中向 css 自定义属性（css variables）传值的正确方式，包括 camelcase 命名规范、style 对象写法、css 中的引用方法，并附可运行示例与常见误区提醒。
在 React 中动态设置 CSS 自定义变量（如 --d）是实现动画参数化、主题切换或响应式样式的关键技巧。你尝试的写法 <div className="grow-ans" style={{'--d': '4s'}}> 逻辑方向正确，但未生效往往源于两个关键细节：React 的 style 属性要求键名使用驼峰命名（camelCase），且CSS 变量必须在真实生效的 CSS 规则中被 var() 函数引用，否则仅声明无效果。
✅ 正确做法如下：
首先，在 JSX 中使用合法的 camelCase 键名（注意：--d 本身已是合法 CSS 属性名，React 16.8+ 已支持带连字符的自定义属性，无需转为 d 或 D；但需确保写法规范）：
const FlowerAnimation = () => {
const duration = '4s';
const delay = '0.5s';
const animationStyle = {
'--d': duration,
'--delay': delay,
};
return (
<div className="grow-ans" style={animationStyle}>
?
</div>
);
};其次，在对应的 CSS 文件（如 App.css 或模块化 CSS）中，必须显式使用 var(--d) 引用该变量，且确保选择器匹配：
立即学习“前端免费学习笔记（深入）”；
.grow-ans {
/* 注意：动画名需与 @keyframes 名称一致 */
animation: grow var(--d) linear forwards;
animation-delay: var(--delay);
}
/* 示例动画定义 */
@keyframes grow {
0% { transform: scale(0); opacity: 0; }
70% { transform: scale(1.2); }
100% { transform: scale(1); opacity: 1; }
}⚠️ 常见误区与注意事项：
- ❌ 不要写成 style={{ d: '4s' }} —— 这会设置 d 样式属性（无效 CSS 属性），而非自定义变量；
- ❌ 不要在 CSS 中遗漏 var() 调用，例如 .grow-ans { animation-duration: --d; } 是错误的，必须写为 animation-duration: var(--d);；
- ✅ 支持动态更新：变量值可随 React state 或 props 变化实时重渲染，触发 CSS 动画重播；
- ✅ 兼容性良好：现代浏览器（Chrome 49+、Firefox 31+、Safari 9.1+、Edge 16+）均支持 CSS 自定义属性 + React style 注入；
- ? 调试建议：在浏览器开发者工具中检查元素的 Computed 面板，确认 --d 是否出现在 Styles 的 inline styles 下，并查看 animation 计算值是否已解析为 grow 4s linear forwards。
通过以上结构化配置，你就能成功将 GitHub 上 jeycaarce/flowers 的 HTML 动画无缝迁移至 React 函数组件，实现完全可控、可复用的花瓣生长动画效果。
