React向CSS传递变量：正确格式与用法问题求助

你的代码主要存在语法错误、CSS变量使用不当、px单位位置错误这几个问题，按以下方式修改即可解决：

1. 修正React端代码 #

把计算结果直接拼接px，通过style属性传递CSS自定义变量（比自定义组件属性更直接），同时补全缺失的括号：

<MainMenu 
  className={styles.mainMenu} 
  style={{ 
    '--myVar': `${ref1.current?.clientHeight - ref2.current?.clientHeight}px` 
  }} 
/>

加?.是防止ref未挂载时current为null导致报错，可根据你的实际场景调整。

2. 修正CSS/Sass代码 #

CSS变量不能直接跟px拼接，响应式里的数值运算必须用calc包裹，修正后：

.mainMenu {
  @include breakpoint(xlarge) {
    margin-top: var(--myVar);
    height: calc(100vh - var(--myVar));
  }
  @include breakpoint(small) {
    // 用calc对变量做减法运算
    margin-top: calc(var(--myVar) - 47px);
    height: calc(100vh - (var(--myVar) - 47px));
  }
}

关键说明 #

• 不要在var()后直接加px：比如var(--myVar)px会被解析成「数值+pxpx」，完全不符合CSS语法，必须把单位包含在变量值里（React端处理），或者在calc里组合数值和单位。
• CSS变量名不能包含空格和运算符号：var(--myVar - 47)是非法写法，所有数值运算都要放在calc()内部。
• 确保ref已挂载：如果组件初始化时ref还没获取到DOM元素，clientHeight会是undefined，建议在useEffect里处理或者加可选链?.避免报错。

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