如何修改Material UI TextField与Select组件未聚焦状态下的标签及边框颜色

你遇到的问题很常见——在深色背景下，MUI标准变体的表单组件默认的黑色文本/边框确实会难以辨认。下面我结合你的代码给出两种解决方案：全局主题统一配置，和单个组件按需调整。

一、全局主题配置（推荐） #

既然你已经在用ThemeProvider，最好通过主题全局修改，这样所有同类型组件都会自动生效，不用逐个设置。修改你的Theme组件：

export default function Theme(props:any) {
  const theme = createTheme({
    palette: {
      primary: props.primary,
      secondary: props.secondary,
      // 修改全局文本基础色，适配深色背景
      text: {
        primary: '#ffffff', // 未聚焦标签的默认颜色
        disabled: 'rgba(255,255,255,0.4)' // 未聚焦下划线的半透明白色
      }
    },
    // 针对表单组件做精细定制（可选，避免全局文本颜色被影响）
    components: {
      MuiInputLabel: {
        styleOverrides: {
          root: {
            color: '#ffffff', // 强制未聚焦标签为白色
            '&.Mui-focused': {
              color: props.primary.main // 聚焦时保持主题主色
            }
          }
        }
      },
      MuiInput: {
        styleOverrides: {
          underline: {
            '&:before': {
              borderBottomColor: 'rgba(255,255,255,0.4)' // 未聚焦下划线颜色
            },
            '&:hover:not(.Mui-disabled):before': {
              borderBottomColor: 'rgba(255,255,255,0.7)' // 鼠标悬停时下划线加深
            }
          }
        }
      }
    }
  })
  return (
    <ThemeProvider theme={theme}>
      {props.children}
    </ThemeProvider>
  )
}

这样修改后，所有TextField（standard变体）和Select的未聚焦标签都会变成白色，下划线也会适配深色背景，不用再单独给每个组件加样式。

二、单个组件SX局部修改 #

如果你不想全局修改，只想针对特定组件调整，可以直接在组件的sx属性里覆盖样式：

针对TextField： #

<TextField 
  sx={{
    marginBottom: '20px', 
    input: { color: 'white' },
    // 修改未聚焦标签颜色
    '& .MuiInputLabel-root': { color: 'white' },
    // 修改未聚焦下划线颜色
    '& .MuiInput-underline:before': { borderBottomColor: 'rgba(255,255,255,0.4)' },
    // hover状态下的下划线颜色
    '& .MuiInput-underline:hover:before': { borderBottomColor: 'rgba(255,255,255,0.7)' }
  }} 
  variant="standard" 
  type="text" 
  label="Username" 
  required 
  fullWidth 
/>

针对Select组件： #

修改你的Sex组件：

function Sex () {
  const [sex, setSex] = React.useState('');
  const changeHandler = (e:any) => {setSex(e.target.value);}
  return (
    <FormControl sx={{ minWidth: 200 }}>
      <InputLabel sx={{ color: 'white' }}>Sex</InputLabel>
      <Select 
        value={sex} 
        label="Sex" 
        onChange={changeHandler}
        sx={{
          color: 'white',
          '& .MuiInput-underline:before': { borderBottomColor: 'rgba(255,255,255,0.4)' },
          '& .MuiInput-underline:hover:before': { borderBottomColor: 'rgba(255,255,255,0.7)' }
        }}
      >
        <MenuItem value={1}>Male</MenuItem>
        <MenuItem value={0}>Female</MenuItem>
      </Select>
    </FormControl>
  )
}

注意点 #

• 因为你用的是standard变体，样式类和outlined/filled变体不同，要注意区分；
• 如果选择全局配置，text.primary会影响其他文本元素（比如Typography），此时更推荐用components.styleOverrides单独定制表单组件，避免全局样式冲突。

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