如何设置Material UI TextField始终显示为聚焦状态的默认样式？

方法一：单个组件快速自定义（sx属性） #

直接在TextField组件上通过sx属性覆盖未聚焦状态的样式，对齐聚焦时的效果：

import TextField from '@mui/material/TextField';

<TextField
  label="示例输入框"
  variant="outlined"
  sx={{
    // 处理输入框边框样式
    '& .MuiOutlinedInput-root': {
      '&:not(.Mui-focused):not(.Mui-error):not(.Mui-disabled) .MuiOutlinedInput-notchedOutline': {
        borderColor: 'primary.main',
        borderWidth: 2,
      },
      // 处理label的位置和颜色
      '&:not(.Mui-focused) .MuiInputLabel-root': {
        transform: 'translate(14px, -9px) scale(0.75)',
        color: 'primary.main',
      }
    }
  }}
/>

如果使用filled或standard变种，只需调整对应类名：

• filled变种：替换MuiOutlinedInput-root为MuiFilledInput-root，调整背景色和下划线样式
• standard变种：替换为MuiInput-root，修改MuiInput-underline:before的样式

方法二：全局主题自定义（全项目统一） #

若需要所有TextField保持该样式，可通过自定义主题全局覆盖：

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

const theme = createTheme({
  components: {
    MuiTextField: {
      styleOverrides: {
        root: {
          // 针对outlined变种
          '& .MuiOutlinedInput-root': {
            '&:not(.Mui-focused):not(.Mui-error):not(.Mui-disabled) .MuiOutlinedInput-notchedOutline': {
              borderColor: 'primary.main',
              borderWidth: 2,
            },
            '&:not(.Mui-focused) .MuiInputLabel-root': {
              transform: 'translate(14px, -9px) scale(0.75)',
              color: 'primary.main',
            }
          }
        }
      }
    }
  }
});

// 在根组件包裹ThemeProvider
function App() {
  return (
    <ThemeProvider theme={theme}>
      <TextField label="全局样式输入框" variant="outlined" />
    </ThemeProvider>
  );
}

注意事项 #

• 务必根据使用的variant（outlined/filled/standard）调整对应类名和样式属性
• 选择器中保留.Mui-error和.Mui-disabled的排除逻辑，避免覆盖错误、禁用状态的样式
• 用主题色（如primary.main）可保持与原有聚焦样式的一致性，也可直接自定义颜色值（如#1976d2）

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