类型“MuiCancellableEventHandler<FocusEvent<HTMLElement,Element>”不可分配给类型“FocusEventHandler<HTMLButtonElement>”

我正试图将材料挂钩选择添加到我的项目中,但收到类型错误。 选择: https://codesandbox.io/s/zspj7n?file=/Demo.js

ERROR in ./src/ui/MuiSelect/MuiSelect.tsx:203:8
TS2322: Type '{ children: string | Element; 'aria-activedescendant'?: string | undefined; onBlur: MuiCancellableEventHandler<FocusEvent<HTMLElement, Element>>; ... 6 more ...; role: AriaRole | undefined; }' is not assignable to type 'ButtonHTMLAttributes<HTMLButtonElement>'.
  Types of property 'onBlur' are incompatible.
    Type 'MuiCancellableEventHandler<FocusEvent<HTMLElement, Element>>' is not assignable to type 'FocusEventHandler<HTMLButtonElement>'.
      Types of parameters 'event' and 'event' are incompatible.
        Type 'FocusEvent<HTMLButtonElement>' is not assignable to type 'FocusEvent<HTMLElement, Element> & MuiCancellableEvent'.
          Type 'FocusEvent<HTMLButtonElement>' is not assignable to type 'FocusEvent<HTMLElement, Element>'.
            Types of property 'relatedTarget' are incompatible.
              Type 'EventTarget' is not assignable to type 'EventTarget & Element'.
                Type 'EventTarget' is missing the following properties from type 'Element': attributes, classList, className, clientHeight, and 161 more.
    201 |   return (
    202 |     <Root>
  > 203 |       <Toggle {...getButtonProps()}>
        |        ^^^^^^
    204 |         {renderSelectedValue(value, options) || (
    205 |           <span className="placeholder">{placeholder ?? " "}</span>
    206 |         )}

ERROR in ./src/ui/MuiSelect/MuiSelect.tsx:208:8
TS2322: Type '{ children: Element; "aria-hidden": boolean; className: string; onMouseDown: MouseEventHandler<Element>; 'aria-multiselectable': Booleanish | undefined; id: string | undefined; ref: ((instance: Element | null) => void) | null; role: AriaRole | undefined; }' is not assignable to type 'HTMLAttributes<HTMLUListElement>'.
  Types of property 'onMouseDown' are incompatible.
    Type 'MouseEventHandler<Element>' is not assignable to type 'MouseEventHandler<HTMLUListElement>'.
      Types of parameters 'event' and 'event' are incompatible.
        Type 'MouseEvent<HTMLUListElement, MouseEvent>' is missing the following properties from type 'MouseEvent<Element, MouseEvent>': detail, view
    206 |         )}
    207 |       </Toggle>
  > 208 |       <Listbox
        |        ^^^^^^^
    209 |         {...getListboxProps()}
    210 |         aria-hidden={!listboxVisible}
    211 |         className={listboxVisible ? "" : "hidden"}

我的tsconfig.json

{
  "compilerOptions": {
    "module": "system",
    "removeComments": true,
    "preserveConstEnums": true,
    "outFile": "../../built/local/tsc.js",
    "sourceMap": true,
    "outDir": "build/dist",
    "target": "esnext",
    "baseUrl": "./src",
    "lib": ["es6", "dom", "esnext.asynciterable"],
    "allowJs": false,
    "noEmit": true,
    "jsx": "react",
    "moduleResolution": "node",
    "rootDirs": ["src"],
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": false,
    "strictNullChecks": true,
    // remove when https://github.com/palantir/tslint/issues/2470 is fixed
    "noUnusedLocals": false,
    "skipLibCheck": true,
    "importHelpers": true,
    "incremental": true,
    "tsBuildInfoFile": "node_modules/.cache/tsbuildinfo",
    "experimentalDecorators": true,
    "esModuleInterop": true,  
  },
  "exclude": [
    "build",
    "scripts",
    "acceptance-tests",
    "webpack",
    "jest",
    "config",
    "src/setupTests.ts",
    "e2e",
    "src/**/*.spec.ts"
  ],
  "include": ["src", "node_modules/translations/erste-hub-client/src"]
}

我的webpack配置:

'use strict';

process.env.NODE_ENV = process.env.NODE_ENV || 'development';

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const { envs, stringifiedEnvs } = require('./env_whitelist');
const paths = require('./paths');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');

module.exports = {
  devtool: 'cheap-module-source-map',
  mode: 'development',
  entry: {
    main: ['@babel/polyfill', paths.appIndexJs],
  },

  output: {
    path: paths.appBuild,
    publicPath: '/',
  },

  resolve: {
    modules: [path.resolve(__dirname, '../src'), 'node_modules'],
    extensions: ['.ts', '.tsx', '.js', '.json', '.jsx'],
    alias: {
      'react-native': 'react-native-web',
      'react-dom': '@hot-loader/react-dom',
    },
    fallback: {
      fs: false,
      net: false,
      tls: false,
      https: require.resolve('https-browserify'),
      http: require.resolve('stream-http'),
      url: require.resolve('url/'),
      buffer: require.resolve('buffer/'),
    },
  },
  module: {
    strictExportPresence: false,
    rules: [
      {
        exclude: [
          /\.ejs$/,
          /\.html$/,
          /\.(js|jsx)(\?.*)?$/,
          /\.(ts|tsx)(\?.*)?$/,
          /\.css$/,
          /\.json$/,
          /\.bmp$/,
          /\.gif$/,
          /\.jpe?g$/,
          /\.png$/,
          /\.md$/,
          /\.yaml$/,
          /\.mjs$/,
        ],
        loader: 'file-loader',
      },
      {
        test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
        loader: 'url-loader',
      },
      {
        test: /\.(ts|tsx|m?js)$/,
        include: [
          paths.appSrc,
          path.join(paths.appNodeModules, 'translations'),
          path.join(paths.appNodeModules, 'uri-js'),
          path.join(paths.appNodeModules, 'yaml-js'),
        ],
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: [
                '@babel/typescript',
                [
                  '@babel/preset-env',
                  {
                    targets: {
                      chrome: '90',
                      firefox: '90',
                      opera: '50',
                    },
                  },
                ],
              ],
              plugins: [
                '@babel/proposal-class-properties',
                '@babel/proposal-numeric-separator',
                '@babel/proposal-object-rest-spread',
                [
                  'transform-imports',
                  {
                    'redux-form': {
                      transform: 'redux-form/es/${member}',
                      preventFullImport: true,
                    },
                  },
                ],
              ],
            },
          },
        ],
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: [/\.md$/, /\.yaml$/],
        use: 'raw-loader',
      },
    ],
  },

  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
    }),
    new CopyWebpackPlugin({
      patterns: [
        {
          from: path.resolve(__dirname, '../public/static'),
          to: path.resolve(__dirname, '../build/static'),
        },
      ],
    }),
    new ForkTsCheckerWebpackPlugin({
      devServer: true,
    }),
    new HtmlWebpackPlugin({
      template: 'ejs-compiled-loader!' + paths.appHtml,
      NODE_ENV: process.env.NODE_ENV,
      templateParameters: {
        envs: envs,
        envString: Buffer.from(stringifiedEnvs).toString('base64'),
        outOfOrderString: Buffer.from(JSON.stringify({})).toString('base64'),
        NODE_ENV: process.env.NODE_ENV,
      },
    }),
    process.env.WEBPACK_ANALYZE &&
      new BundleAnalyzerPlugin({ analyzerMode: 'static', generateStatsFile: true }),
  ].filter(Boolean),

  performance: {
    hints: false,
  },

  devServer: {
    hot: true,
    historyApiFallback: { disableDotRule: true },
    port: 3000,
    host: '0.0.0.0',
  },

  stats: {
    errorDetails: false,
  },
};

我试着在我的项目中开始使用基于材料的组件,但存在类型错误,我甚至无法编译。我能够从我的计算机上的文档中运行示例,所以我的项目配置中一定有问题。