ReactMaterial-UI TS：输入'{children：string;变体：字符串;颜色：字符串； }”不能分配给类型“ IntrinsicAttributes＆RefAttributes <any>”

Question

所以我已经使用material-ui已有一段时间了，但这是我第一次在create-react-app之外使用它。当我尝试使用material-ui中的组件时，关于IntrinsicAttributes上不存在的道具，我会或多或少地遇到相同的错误

/mnt/e/nodeStuff/appletTesting/v3/applet-testing/src/views/Test/Test.tsx中的错误 ./src/views/Test/Test.tsx [tsl] /mnt/e/nodeStuff/appletTesting/v3/applet-testing/src/views/Test/Test.tsx(9,10）中的错误 TS2322：键入'{children：string;变体：字符串;颜色：字符串； }”不能分配给“ IntrinsicAttributes＆RefAttributes”类型。 属性“ children”在“ IntrinsicAttributes＆RefAttributes”类型上不存在。 ｢wdm｣：编译失败。

我很想知道这个软件包为什么要这样做以及如何解决它。

以下是我在其上运行的示例tsx文件：

import RenderingStrategy from "../../RenderingStrategy";
import React from "react";
import Button from '@material-ui/core/Button';

class Test extends React.Component<{}, {}> {
  render(){
    return (
      <div>
        <Button variant="contained" color="primary">
          Hello World
        </Button>
      </div>
    );
  }
}

export default Test;

RenderingStrategy(Test);
module.hot.accept();

这是我的RenderingStrategy文件

import ReactDOM from "react-dom";
import React from 'react';

const RenderingStrategy = (ViewToRender: React.ComponentClass, injectionSiteTargetClassName: string = "company-applet-injection-site")=>{
  var targetSites = Array.from(document.getElementsByClassName(injectionSiteTargetClassName));
  for(let i in targetSites){
    ReactDOM.render(
      <ViewToRender />,
      targetSites[i]
    );
  }
}
export default RenderingStrategy;

这是我的package.json中的内容

{
  "name": "applet-testing",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "scripts": {
    "start": "node server",
    "dev": "webpack-dev-server --config ./webpack.config.js --mode development",
    "build": "webpack --config ./webpack.config.js --mode production",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.10.2",
    "@babel/preset-env": "^7.10.2",
    "@babel/preset-react": "^7.10.1",
    "@types/webpack-env": "^1.15.2",
    "babel-loader": "^8.1.0",
    "react-hot-loader": "^4.12.21",
    "ts-loader": "^7.0.5",
    "typescript": "^3.9.5",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.11.0"
  },
  "dependencies": {
    "@material-ui/core": "^4.10.1",
    "@material-ui/icons": "^4.9.1",
    "@types/material-ui": "^0.21.7",
    "@types/node": "^14.0.11",
    "@types/react": "^16.9.35",
    "@types/react-dom": "^16.9.8",
    "@types/react-router-dom": "^5.1.5",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-router-dom": "^5.2.0"
  }
}

我的webpack配置

const webpack = require("webpack");
const fs = require("fs");
const path = require("path");

var entries = {};

const viewFiles = fs.readdirSync("./src/views");
for(let i in viewFiles){
  if( fs.statSync(path.join("./src/views", viewFiles[i])).isFile() ){
    entries[viewFiles[i]] = path.join(__dirname, "src/views", viewFiles[i])
  }else if( fs.existsSync(path.join("./src/views", viewFiles[i], `${viewFiles[i]}.tsx`)) ){
    entries[viewFiles[i]] = path.join(__dirname, "src/views", viewFiles[i], `${viewFiles[i]}.tsx`);
  }
}

module.exports = {
  entry: entries,
  devtool: 'inline-source-map',
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      },
      {
        test: /\.(ts|tsx)$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      }
    ]
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx']
  },
  output: {
    path: __dirname + '/dist',
    publicPath: '/',
    filename: '[name].js'
  },
  devServer: {
    disableHostCheck: true,
    contentBase: './dist',
    filename: '[name].js',
    hot: true
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ],
};

我的ts配置

{
  "compilerOptions": {
    "forceConsistentCasingInFileNames": false,
    "skipLibCheck": true,
    "outDir": "./dist/",
    "sourceMap": true,
    "noImplicitAny": true,
    "module": "es6",
    "target": "es5",
    "jsx": "react",
    "allowJs": true,
    "allowSyntheticDefaultImports": true
  },
  "include": [
    "src/*"
  ],
  "exclude": [
    "node_modules",
    "build",
    "dist",
    "scripts",
    "acceptance-tests",
    "webpack",
    "jest",
    "src/setupTests.ts"
  ],
  "types": [
      "typePatches"
  ]
}