Question

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

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

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

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的{{1}}更改为h2的值，则会抛出错误，但不会为{{ 1}}而不是我在px或无单位值中定义lineHeight。

以上代码引发错误，因为我在h3中定义了px的lineHeight，如果将其更改为以下代码，我将开始工作：

h1

建议我为什么会这样。我进行了搜索，但在StackOverflow上没有发现任何相关问题。

Answer 1

大概在代码的某个位置，您正在使用responsiveFontSizes function，因为它包含code that throws this error。

由于以下condition within responsiveFontSizes，您的h3不会发生错误：

    if (remFontSize <= 1) {
      return;
    }

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

Material-UI：不支持的非无对齐线高与网格对齐。请改用无单位的行高

1 个答案: