在 IE 11 上反应 Material-ui

Question

我正在开发一个使用 Material-ui 组件的反应站点。如果不使用 pollyfil，我无法让应用程序在 IE 中呈现。我已经添加了 polyfil，并且组件正在正确渲染。但是...我有一个在 chrome 中完美运行的 TextField，它在 IE 中呈现。下面是它的配置方式。

          <TextField
            tabIndex="0"
            required
            variant="outlined"
            id="outLined-StreetNumber"
            key="streetNumber"
            error={avt.streetNumberError}
            helperText={
              avt.streetNumberError ? translation("address.StreetNumberError") : ""
            }
            label={translation("address.StreetNumber")}
            value={avt.StreetNumber}
            onChange={(event) => {
              avt.setStreetNumber(event.target.value);
            }}
            onBlur={(event) => {
              validateSteetNumber(event);
            }}
          />

问题是在使用 IE 时，我无法在文本字段中输入内容。光标在那里，但我输入并没有显示任何文字。

如果我添加了以下内容，那么文本会在我输入时显示。这很棒，但字体很大。

inputProps={{style: {fontSize: 21}}} // 输入文本的字体大小

因此，如果我将此字体大小设置为小于 21，您将无法再次输入任何文本。

想法？

编辑：

import React, { useContext } from "react";
import { Paper, TextField, Grid } from "@material-ui/core";
import { useTranslation, getLanguage } from "react-multi-lang";
import { AvtContext } from "../../avtContext";

export default function ServiceAddress() {
  const avt = useContext(AvtContext);
  let language = getLanguage();
  let path = language + ".json";
  const translation = useTranslation(path);

  return (
    <Paper>
      <Grid>
        <TextField
          label="This works"
          inputProps={{ style: { fontSize: 40 } }}
        />

        <TextField
          label="This doesn't work"
          inputProps={{ style: { fontSize: 15 } }}
        />

        <TextField
          tabIndex="0"
          required
          variant="outlined"
          id="outLined-StreetNumber"
          key="streetNumber"
          error={avt.streetNumberError}
          helperText={
            avt.streetNumberError
              ? translation("address.StreetNumberError")
              : ""
          }
          label={translation("address.StreetNumber")}
          value={avt.StreetNumber}
          onChange={(event) => {
            avt.setStreetNumber(event.target.value);
          }}
        />
      </Grid>
    </Paper>
  );
}

package.json

{
  "name": "avt-front",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@devexpress/dx-react-core": "^2.7.5",
    "@devexpress/dx-react-scheduler": "^2.7.5",
    "@devexpress/dx-react-scheduler-material-ui": "^2.7.5",
    "@material-ui/core": "^4.11.4",
    "@material-ui/icons": "^4.11.2",
    "@testing-library/jest-dom": "^5.12.0",
    "@testing-library/react": "^11.2.6",
    "@testing-library/user-event": "^12.8.3",
    "axios": "^0.21.1",
    "clsx": "^1.1.1",
    "devextreme": "^20.2.4",
    "devextreme-react": "20.2.3",
    "edit-json-file": "^1.6.0",
    "http-proxy-middleware": "^2.0.0",
    "load-json-file": "^6.2.0",
    "react": "^17.0.2",
    "react-api": "^1.0.5",
    "react-app-polyfill": "^2.0.0",
    "react-country-region-selector-material-ui": "^1.0.0",
    "react-dom": "^17.0.2",
    "react-fetch-hook": "^1.8.5",
    "react-material-ui-form-validator": "^2.1.1",
    "react-multi-lang": "^2.1.1",
    "react-redux": "^7.2.4",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "react-text-mask": "^5.4.3",
    "redux": "^4.1.0",
    "uuid": "^8.3.2",
    "web-vitals": "^1.1.1",
    "write-json-file": "^4.3.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ],
    "plugins": [
      "react-hooks"
    ],
    "rules": {
      "react-hooks/rules-of-hooks": "error",
      "react-hooks/exhaustive-deps": "warn"
    }
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version",
      "ie 11"
    ]
  },
  "devDependencies": {
    "devextreme-themebuilder": "^20.2.4",
    "eslint-plugin-react-hooks": "^4.2.0",
    "json-server": "^0.16.3",
    "redux-devtools": "^3.7.0"
  },
  "homepage": "./"
}

Answer 1

我在创建应用时遇到了同样的问题。这是快速答案。没有任何东西适用于 IE（任何版本）。除非这是为了你的工作，否则最好忽略 IE 并且永远不要修复它。无论如何，它的 EOL 很快就会到来，即 2022 年 6 月 15 日，甚至微软也要求人们停止使用 IE 来支持 Edge，这只是他们的 Chrome 版本。

• 我最近不得不说服我的主管停止让我们为 IE 编写代码。

我最终模拟了自己的 css 来让任何东西在 IE 上运行。我可以使用 MUI 提供的 makeStyles 和 createStyles 钩子来做到这一点。

我的代码实际上有 2 个不同的文件，一个用于 IE，一个用于其他所有文件。

使用基本的 DOM 元素而不是 MUI 更容易使用漂亮的、经过修改的元素并自行设置样式。如果您确实需要为 IE 进行开发，它将为您省去很多麻烦。