如何修改MUI TextField默认文字与边框颜色？多种尝试均失败

针对你遇到的问题，给你两个可行方案： #

方案1：单个组件自定义样式

直接在TextField上配置所有状态的样式，覆盖默认行为：

<TextField
  label="输入框示例"
  variant="outlined"
  // 控制标签文字（未编辑+编辑状态）
  InputLabelProps={{
    style: { color: 'white' },
    classes: {
      focused: 'label-focused'
    }
  }}
  // 控制输入文字和边框
  InputProps={{
    style: { color: 'white' }, // 输入文字始终为白色
    classes: {
      notchedOutline: 'input-outline'
    }
  }}
/>

// 配合全局或组件内CSS
.label-focused {
  color: white !important;
}
.input-outline {
  border-color: white !important;
}

方案2：全局主题定制（推荐）

之前你尝试的主题配置不对，因为TextField的样式由内部子组件（如MuiInput、MuiInputLabel、MuiOutlinedInput）控制，直接修改MuiTextField不会生效。正确的主题配置如下：

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

const customTheme = createTheme({
  components: {
    // 控制输入文字颜色
    MuiInput: {
      styleOverrides: {
        root: {
          color: 'white',
        },
      },
    },
    // 控制边框的默认、hover、聚焦状态颜色
    MuiOutlinedInput: {
      styleOverrides: {
        notchedOutline: {
          borderColor: 'white',
        },
        root: {
          '&:hover .MuiOutlinedInput-notchedOutline': {
            borderColor: 'white',
          },
          '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
            borderColor: 'white',
          },
        },
      },
    },
    // 控制标签的默认、聚焦状态颜色
    MuiInputLabel: {
      styleOverrides: {
        root: {
          color: 'white',
          '&.Mui-focused': {
            color: 'white',
          },
        },
      },
    },
  },
});

// 用ThemeProvider包裹你的应用或组件
<ThemeProvider theme={customTheme}>
  <TextField label="全局定制输入框" variant="outlined" />
</ThemeProvider>

为什么你之前的方法无效？ #

• 仅通过InputLabelProps.style只能修改未聚焦状态的标签颜色，聚焦时标签样式由.Mui-focused类控制，需要单独覆盖
• 直接给MuiTextField.defaultProps.style设置颜色，不会传递到内部的输入框文字和标签元素，必须针对具体子组件做样式覆盖

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