React项目使用CSS minmax函数报ReferenceError未定义如何解决

开发者阿泽

2026-10-3

问题根因

你在样式对象中将CSS原生函数minmax、repeat写成了JS函数调用形式，React解析样式对象时会尝试在JS作用域中查找对应函数执行，你没有定义minmax的JS函数，因此抛出未定义错误。所谓的「React可识别repeat函数」本质是巧合，大概率是你的项目依赖中恰好全局注入了同名JS函数，并非React原生支持该写法。

解决方案

方案1：使用MUI sx属性/React行内style属性时，将gridTemplateColumns的取值改为完整CSS字符串
示例代码：

<Grid
  container
  sx={{
    gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
    gap: 2
  }}
>
  {/* 你的网格子元素 */}
</Grid>

方案2：如果使用CSS文件/CSS module定义样式，直接写原生CSS语法即可
示例代码：
```
.custom-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}
```
后续直接给Grid组件添加className="custom-grid"属性即可生效。