如何获得对 MUI `sx` 属性值的 lint 支持

Question

我已经尝试了以下方法，但我仍然没有得到任何 lint 支持来检测错误的样式属性和值。

import { SxProps, Theme } from "@mui/material";

export const navBarStyles: Record<string, SxProps<Theme> | undefined> = {
    notification: {
        backgroundColor: 'white',
        "&:hover, &.Mui-focusVisible": { backgroundColor: "white" }
    },
    test: {
        colorBlaBlaBla: 'greennnnn'
    }
}

在上面的示例中，

colorBlaBlaBla

样式属性和

greennnnn

值都不会在 VSCode 中引发任何 lint 警告。不过我得到了自动完成建议。但是有没有办法在 MUI

sx

属性中配置 linter 支持这些错误值？

或者我应该在 MUI 中使用其他方法来获得 linter 支持吗？

Answer 1

使用 TypeScript 类型和 MUI 的 SxProps 类型定义您的样式。为您的样式创建一个界面，如下所示：

import { SxProps, Theme } from "@mui/material";

interface NavBarStyles {
  notification: SxProps<Theme>;
  test: SxProps<Theme>;
}

export const navBarStyles: NavBarStyles = {
  notification: {
    backgroundColor: 'white',
    "&:hover, &.Mui-focusVisible": { backgroundColor: "white" }
  },
  test: {
    // TypeScript will provide autocompletion and linting for valid style properties and values
    backgroundColor: 'green',
  },
};

现在，当您使用 navBarStyles 时，TypeScript 将为有效的样式属性和值提供自动完成和 linting。如果您尝试使用无效的样式属性或值，TypeScript 将在编辑器中显示错误。

例如，如果您尝试使用无效的样式属性（如 colorBlaBlaBla）或值（如 greennnnn），TypeScript 会在代码编辑器中将其突出显示为错误，从而提供 linting 支持。