如何阻止Material UI(v4.12.3) TextField编辑后背景变色？

要阻止TextField在编辑完成后改变背景色，你需要通过自定义样式覆盖Material-UI默认的状态样式，强制所有状态下背景色保持白色。以下是具体实现步骤：

1. 创建自定义样式 #

使用makeStyles定义覆盖样式，针对Input组件的不同状态（默认、hover、聚焦、有值时）设置固定白色背景：

import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles({
  inputRoot: {
    // 默认背景色
    backgroundColor: '#ffffff',
    // hover状态保持白色
    '&:hover': {
      backgroundColor: '#ffffff',
    },
    // 聚焦状态保持白色
    '&.Mui-focused': {
      backgroundColor: '#ffffff',
    },
    // 输入内容后的filled状态（针对FilledInput）
    '&.MuiFilledInput-filled': {
      backgroundColor: '#ffffff',
    },
    // filled状态下hover
    '&.MuiFilledInput-filled:hover': {
      backgroundColor: '#ffffff',
    },
    // filled状态下聚焦
    '&.MuiFilledInput-filled.Mui-focused': {
      backgroundColor: '#ffffff',
    },
  },
});

2. 应用样式到TextField #

将自定义样式添加到TextField的InputProps.classes中，覆盖默认的root类样式：

const classes = useStyles();

<TextField
  {...field}
  value={displayValue ?? field.value}
  onChange={handleChange}
  label={label}
  placeholder={isFocused ? placeholder : undefined}
  error={invalid}
  helperText={invalid && error}
  disabled={disabled}
  onFocus={handleFocus}
  onBlur={handleBlur}
  multiline={multiline}
  InputProps={{
    classes: {
      root: classes.inputRoot, // 添加自定义root样式
      input: className
    },
    disableUnderline: disableUnderline,
    inputComponent: inputComponent
  }}
  InputLabelProps={{
    shrink: true,
    style: {
      fontSize: '15px',
      ...labelStyle
    },
    classes: {
      shrink: classes.inputLabel
    }
  }}
  inputProps={{
    'aria-label': label
  }}
  FormHelperTextProps={{
    style: {
      ...helperTextStyle
    }
  }}
  {...rest}
/>

说明 #

• 如果你使用的是OutlinedInput而非FilledInput，只需移除样式中与MuiFilledInput-filled相关的规则，保留root、:hover、.Mui-focused的背景色设置即可。
• 上述样式会强制TextField在所有交互状态下保持白色背景，完全覆盖默认的背景色变化逻辑。

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