react material- IE 11上的ui

Question

我在一个使用Material-ui组件的react站点上工作。如果不使用pollyfil，我无法在IE中渲染应用程序。我已经添加了polyfil，组件可以正确渲染。然而..。我有一个TextField，它在chrome中工作得很好，而且它在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，永远不要修复它。它的停产时间很快就会到来，2022年6月15日，甚至连微软都要求人们停止使用IE，转而使用Edge，这只是他们的Chrome版本。

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

我最终模拟了我自己的css，以便在IE上运行任何东西。我可以使用MUI提供的makeStyles和createStyles钩子来完成此操作。

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

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