在 React 项目中无法识别 minmax CSS 函数

【问题标题】：minmax CSS function is not recognized in React project在 React 项目中无法识别 minmax CSS 函数
【发布时间】：2021-09-26 04:25:21
【问题描述】：

我在我的 React 项目中使用以下行来设置材质 UI 网格的样式。

gridTemplateColumns: Repeat("auto-fit", minmax("300px", "1fr"))

我收到此错误“ReferenceError: minmax is not defined”。

看起来 React 知道 repeat CSS 函数，但不知道 minmax 函数。我不知道为什么。任何帮助将不胜感激。

【问题讨论】：

【解决方案1】：

您当前正在尝试调用函数并将字符串传递给它们，但这是不正确的。 gridTemplateColumns 必须是字符串，而不是函数调用。该字符串恰好看起来像函数调用，但如果需要运行任何代码，浏览器会执行此操作，而不是您。

style={{
  gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))"
}}

【讨论】：

你是对的。这就是我在使用内联样式设置元素时应该做的事情。如果我正在设计一个材质 UI 组件的样式，我会怎么做？我正在尝试将样式应用于材质 UI Grid 组件。