MUI Input样式报错：不支持对象中使用kebab-case命名CSS属性

这个报错是因为代码校验工具（如ESLint、Stylelint）或CSS-in-JS类型检查机制，不允许在JS对象形式的CSS中使用短横线命名的浏览器前缀属性（-moz-appearance、-webkit-appearance），而MUI的InputBase内部恰好使用了这些属性。以下是几种可行的解决方法：

方法1：调整代码校验规则（推荐） #

如果是ESLint触发的报错，可在ESLint配置文件（如.eslintrc.js）中添加规则，允许带浏览器前缀的kebab-case属性：

module.exports = {
  rules: {
    // TypeScript项目的命名规则配置
    "@typescript-eslint/naming-convention": [
      "error",
      {
        selector: "objectLiteralProperty",
        format: ["camelCase", "PascalCase", "kebab-case"],
        filter: {
          regex: "^-moz-|^-webkit-",
          match: true
        }
      }
    ],
    // 普通JS项目，仅允许浏览器前缀的kebab-case属性
    "no-restricted-syntax": [
      "error",
      {
        selector: "Property[key.name=/^-(?!moz|webkit)/]",
        message: "禁止非浏览器前缀的kebab-case属性"
      }
    ]
  }
};

若不想修改全局规则，也可直接忽略MUI的InputBase文件，在.eslintignore中添加：

node_modules/@mui/material/InputBase/InputBase.js

方法2：自定义覆盖InputBase样式 #

通过MUI的样式覆盖机制，用驼峰式属性名替代kebab-case，绕过校验：

全局主题覆盖 #

import { createTheme, ThemeProvider } from '@mui/material/styles';

const theme = createTheme({
  components: {
    MuiInputBase: {
      styleOverrides: {
        input: {
          WebkitAppearance: 'none',
          MozAppearance: 'none',
        },
      },
    },
  },
});

// 在根组件中用ThemeProvider包裹应用
function App() {
  return <ThemeProvider theme={theme}>...</ThemeProvider>;
}

单个组件自定义 #

import styled from '@mui/material/styles/styled';
import InputBase from '@mui/material/InputBase';

const CustomInput = styled(InputBase)(({ theme }) => ({
  '& input': {
    WebkitAppearance: 'none',
    MozAppearance: 'none',
  },
}));

// 用自定义组件替代原生InputBase
<CustomInput placeholder="示例输入" />

方法3：临时忽略类型/校验错误 #

如果是TypeScript类型检查报错，可在使用InputBase的文件中添加注释临时忽略：

// @ts-ignore
import InputBase from '@mui/material/InputBase';

注：此方法不推荐，会掩盖其他潜在问题。

内容的提问来源于stack exchange，提问作者popuguy