React.js中如何自定义MUI TextField的颜色？

针对深色模式下默认黑色标签和线条不可见的问题，你可以通过以下两种方式自定义样式：

方式一：内联自定义样式（SX Prop） #

直接通过sx属性为单个TextField定制各状态下的颜色，精准适配需求：

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

export default function SignupForm() {
  const [email, setEmail] = useState('');
  
  return (
    <div
      align="center"
      id="rl-signup"
      className="background h-screen w-screen grid-flow-row auto-rows-auto"
    >
      <TextField
        className="m-auto mb-4"
        id="signup-email"
        label="Email"
        placeholder="cagatay@relink.com"
        helperText="Your organization is ReLink"
        onChange={(e) => setEmail(e.target.value)}
        variant="standard"
        required
        sx={{
          // 控制标签颜色
          '& .MuiInputLabel-root': {
            color: '#ffffff', // 默认标签颜色（适配深色背景）
            '&.Mui-focused': {
              color: '#63b3ed', // 聚焦时标签颜色，可替换为你需要的颜色
            },
            '&.Mui-error': {
              color: '#f87171', // 错误状态下标签颜色
            }
          },
          // 默认输入线条
          '& .MuiInput-underline:before': {
            borderBottomColor: '#ffffff',
          },
          // 聚焦时高亮线条
          '& .MuiInput-underline:after': {
            borderBottomColor: '#63b3ed',
          },
          // hover状态线条
          '& .MuiInput-underline:hover:not(.Mui-disabled):before': {
            borderBottomColor: '#94a3b8',
          },
          // 辅助文本颜色
          '& .MuiFormHelperText-root': {
            color: '#ffffff',
          }
        }}
      />
    </div>
  );
}

代码说明： #

• MuiInputLabel-root：对应TextField的标签元素，通过嵌套类名区分聚焦、错误等状态
• MuiInput-underline:before：标准变体下的默认输入线条
• MuiInput-underline:after：聚焦时的高亮线条
• MuiFormHelperText-root：对应helperText元素，确保深色背景下可见

方式二：全局主题定制（适合多处使用场景） #

如果项目中有多个TextField需要统一样式，可通过自定义Material-UI主题实现全局修改：

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

// 自定义深色模式主题
const darkModeTheme = createTheme({
  components: {
    MuiTextField: {
      styleOverrides: {
        root: {
          '& .MuiInputLabel-root': {
            color: '#ffffff',
            '&.Mui-focused': {
              color: '#63b3ed',
            },
          },
          '& .MuiInput-underline:before': {
            borderBottomColor: '#ffffff',
          },
          '& .MuiInput-underline:after': {
            borderBottomColor: '#63b3ed',
          },
          '& .MuiFormHelperText-root': {
            color: '#ffffff',
          }
        },
      },
    },
  },
});

export default function SignupForm() {
  const [email, setEmail] = useState('');
  
  return (
    <ThemeProvider theme={darkModeTheme}>
      <div
        align="center"
        id="rl-signup"
        className="background h-screen w-screen grid-flow-row auto-rows-auto"
      >
        <TextField
          className="m-auto mb-4"
          id="signup-email"
          label="Email"
          placeholder="cagatay@relink.com"
          helperText="Your organization is ReLink"
          onChange={(e) => setEmail(e.target.value)}
          variant="standard"
          required
        />
      </div>
    </ThemeProvider>
  );
}

注意事项： #

• 替换代码中的颜色值（如#63b3ed、#ffffff）为你实际需要的颜色，匹配示例图的效果
• 若使用Material-UI v4，可使用makeStyles替代sx属性实现样式定制

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