React MUI：设置TextField聚焦样式时阻止移动端自动唤起键盘

直接设置focused={mode === 2}会让TextField获得真实DOM焦点，浏览器会自动唤起移动端键盘，而onFocus里的preventDefault无法阻止这个行为——因为焦点已经被设置，键盘唤起是浏览器的默认响应，此时阻止已经无效。

正确的思路是分离视觉聚焦样式与真实DOM焦点：仅在mode为2时应用聚焦的UI样式，不触发真实焦点；当用户点击TextField时，再手动让它获得真实焦点以唤起键盘。

实现方案 #

方法1：使用MUI的sx属性自定义样式 #

通过useRef获取TextField实例，结合sx属性在mode为2时模拟聚焦样式，点击时手动触发焦点：

import { useRef } from 'react';
import TextField from '@mui/material/TextField';

function YourComponent() {
  const textFieldRef = useRef(null);
  const mode = 2; // 替换为你的实际状态变量

  return (
    <TextField
      ref={textFieldRef}
      sx={{
        // 当mode为2时，模拟MUI默认的聚焦样式
        ...(mode === 2 && {
          '& .MuiOutlinedInput-root': {
            '& > fieldset': {
              borderColor: '#1976d2', // MUI默认聚焦边框色
              borderWidth: 2,
            },
            '&:hover > fieldset': {
              borderColor: '#1976d2',
            }
          },
          '& .MuiInputLabel-root': {
            color: '#1976d2', // 聚焦状态下的标签颜色
          }
        })
      }}
      // 点击时手动触发真实焦点，唤起键盘
      onClick={() => {
        textFieldRef.current?.focus();
      }}
      variant="outlined" // 若使用filled/standard，需调整样式选择器
    />
  );
}

方法2：使用自定义CSS类 #

如果项目有全局CSS文件，可定义聚焦样式类，根据mode动态添加：

/* 全局CSS文件中 */
.text-field-focused .MuiOutlinedInput-root > fieldset {
  border-color: #1976d2;
  border-width: 2px;
}
.text-field-focused .MuiInputLabel-root {
  color: #1976d2;
}

组件中使用：

import { useRef } from 'react';
import TextField from '@mui/material/TextField';

function YourComponent() {
  const textFieldRef = useRef(null);
  const mode = 2;

  return (
    <TextField
      ref={textFieldRef}
      className={mode === 2 ? 'text-field-focused' : ''}
      onClick={() => textFieldRef.current?.focus()}
      variant="outlined"
    />
  );
}

注意事项 #

• 若使用filled或standard类型的TextField，需调整样式选择器：
  • filled类型：替换MuiOutlinedInput-root为MuiFilledInput-root
  • standard类型：替换MuiOutlinedInput-root为MuiInput-root
• 样式颜色可根据项目主题调整，比如用MUI主题色变量theme.palette.primary.main（需在ThemeProvider中获取主题）

内容的提问来源于stack exchange，提问作者Mohammad ILA