Material-UI：不支持带有网格对齐的非无单位行高。使用无单位行高代替

Question

在许多 ReactJs 项目中，其中之一抛出以下错误：

Error: Material-UI: unsupported non-unitless line height with grid
alignment. Use unitless line heights instead.

在定义 lineHeight 时px，下面是我的代码：

const breakpoints = createBreakpoints({});

let theme = createMuiTheme({
     typography: {
        allVariants: {
            fontFamily
        },
        h1: {
            fontWeight: 600,
            fontSize: 26,
            lineHeight: '32px',
            [breakpoints.down("sm")]: {
                fontSize: 18,
                lineHeight: '26px',
            }
        },
        h2: {
            fontWeight: 600,
            fontSize: 20,
            lineHeight: 28 / 20
        },
        h3: {
            fontWeight: 600,
            fontSize: 16,
            lineHeight: '22px',
            [breakpoints.down("sm")]: {
                fontSize: 14,
                lineHeight: '20px',
            }
        }
    }
})

在上面的示例中，如果我更改lineHeight或h1值h2，px它会引发错误，但不会引发错误，因为h3我在px或 无单位值中定义了 lineHeight。

上面的代码抛出一个错误，因为我定义了h1in的 lineHeight px，如果我将其更改为下面的代码，我就开始工作：

h1: {
    fontWeight: 600,
    fontSize: 26,
    lineHeight: 32 / 26
},

请告诉我为什么会发生这种情况。我在 StackOverflow 上搜索过，但没有发现任何相关问题。

Answer 1

据推测，您在代码中的某个位置正在使用responsiveFontSizes函数，因为它包含引发此错误的代码。

h3由于responsiveFontSizes 中存在以下情况，因此您不会发生该错误：

    if (remFontSize <= 1) {
      return;
    }

您的h3字体大小为 16，即 1 rem，因此responsiveFontSizes不会对该变体执行任何操作，因此不会引发错误。