如何通过MUI createTheme全局修复iPhone端TextField输入问题

你之前给MuiTextField根节点加样式不生效，是因为TextField是MUI封装的上层组合组件，根节点只是最外层的包裹div，你写的user-select规则根本没命中用户实际交互的原生<input>、<textarea>元素，iPhone Safari的输入限制是作用在原生输入元素上的，容器加样式自然没用。

不要覆写MuiTextField，直接覆写所有输入组件的底层依赖MuiInputBase即可，单行输入、多行文本域、Select、自动补全组件里的输入框全是基于这个基础组件实现的，一次配置全局生效，不需要在每个组件上重复写样式。
对应createTheme配置代码如下：

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

const customTheme = createTheme({
  components: {
    MuiInputBase: {
      styleOverrides: {
        root: {
          // 输入容器层补全样式，避免长按选中文本异常
          "-webkit-user-select": "text",
          "-moz-user-select": "text",
          "-ms-user-select": "text",
          "user-select": "text",
        },
        // 命中单行输入的原生input元素
        input: {
          "-webkit-user-select": "text !important",
          "-moz-user-select": "text !important",
          "-ms-user-select": "text !important",
          "user-select": "text !important",
        },
        // 命中多行输入的原生textarea元素
        textarea: {
          "-webkit-user-select": "text !important",
          "-moz-user-select": "text !important",
          "-ms-user-select": "text !important",
          "user-select": "text !important",
        }
      }
    }
  }
});

• 配置完成后，所有MUI输入类组件都会自动带上该样式，不需要再给单个TextField传inputProps、InputProps写重复的user-select规则。
• 不需要写类似& input:valid:focus + fieldset的绕路选择器，直接覆写MuiInputBase内置的input、textarea类名即可命中原生输入元素，优先级足够覆盖默认样式。
• 不管你用standard、outlined还是filled变体的输入框，都能生效，这三个变体的底层实现都依赖MuiInputBase。

内容的提问来源于stack exchange，提问作者Chukwuemeka Maduekwe