材质 UI 文本字段/输入在 iPhone 上不起作用答案

【问题标题】：MaterialUI Textfield/Input not working on IPhone材质 UI 文本字段/输入在 iPhone 上不起作用
【发布时间】：2022-08-05 14:58:20
【问题描述】：

我刚刚发现我一直在使用 Material UI 开发的所有应用程序，iPhone 用户无法在 Textfield 或 Input 中键入值，并且正确设置了值。

我可以通过添加来单独解决这个问题

      <TextField
        name=\"source-text\"
        multiline
        id=\"source\"
        minRows={3}
        fullWidth
        value={sourceText}
        variant=\"standard\" // <== to enable us disable border
        onChange={(e) => handleSourceTextChange(e.target.value)}
        sx={{
          fontSize: 122,
          fontWeight: 500,
          color: \"#474747\",
        }}
        inputProps={{
          style: {
            fontSize: 22,
            \"-webkit-user-select\": \"text\" /* Chrome, Opera, Safari */,
            \"-moz-user-select\": \"text\" /* Firefox 2+ */,
            \"-ms-user-select\": \"text\" /* IE 10+ */,
            \"user-select\": \"text\" /* Standard syntax */,
          },
        }} // font size of input text
        InputProps={{
          style: {
            fontSize: 22,
            \"-webkit-user-select\": \"text\" /* Chrome, Opera, Safari */,
            \"-moz-user-select\": \"text\" /* Firefox 2+ */,
            \"-ms-user-select\": \"text\" /* IE 10+ */,
            \"user-select\": \"text\" /* Standard syntax */,
          }, // font size of input label
          disableUnderline: true, // <== to hide underline in standard TextField variant
        }}
      />

和处理程序

  const handleSourceTextChange = (value) =>  setSourceText(value);

我想知道是否有办法从 MUI createTheme 设置这种样式，所以我不必在每个 Textfield 中重复我的代码

我尝试将其添加到根主题

    MuiTextField: {
      styleOverrides: {
        root: {
          \"-webkit-user-select\": \"text !important\" /* Chrome, Opera, Safari */,
          \"-moz-user-select\": \"text !important\" /* Firefox 2+ */,
          \"-ms-user-select\": \"text !important\" /* IE 10+ */,
          \"user-select\": \"text !important\" /* Standard syntax */,
          // border: \"3px solid red !important\",

          \"& input:valid:focus + fieldset\": {
            \"-webkit-user-select\": \"text !important\" /* Chrome, Opera, Safari */,
            \"-moz-user-select\": \"text !important\" /* Firefox 2+ */,
            \"-ms-user-select\": \"text !important\" /* IE 10+ */,
            \"user-select\": \"text !important\" /* Standard syntax */,
            // borderLeftWidth: 6,
            // padding: \"4px !important\", // override inline-style
          },
        },
      },
    },

标签： javascript reactjs input react-hooks material-ui

【解决方案1】：

为您将使用的 MaterialUI 中的所有输入组件创建样式覆盖，如下所示：

import { createTheme } from "@mui/material/styles";

const iPhoneInput = {
  styleOverrides: {
    root: {
      "*": {
        "-webkit-user-select": "text !important" /* Chrome, Opera, Safari */,
        "-moz-user-select": "text !important" /* Firefox 2+ */,
        "-ms-user-select": "text !important" /* IE 10+ */,
        "user-select": "text !important" /* Standard syntax */,
      },
    },
  },
};

const muiTheme = createTheme({
  components: {
    MuiTextField: iPhoneInput,
    MuiInput: iPhoneInput,
    MuiFilledInput: iPhoneInput,
    MuiOutlinedInput: iPhoneInput,
  },
});

export default muiTheme;

在您的应用程序条目中，使用<ThemeProvider theme={theme}> 包装您的组件并将主题对象传递给它。

【讨论】：