如何在MUI v5标准TextField中用:valid伪类动态修改边框

要解决带endAdornment时底部边框中断的问题，核心是修改MuiInput-root容器的伪类样式，而非仅修改<input>元素的样式——因为standard变体的TextField底部边框是绘制在root容器上的，这个容器包含了输入框和装饰元素。

具体实现代码 #

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

const theme = createTheme({
  components: {
    MuiInput: {
      styleOverrides: {
        root: {
          // 针对输入有效状态（MUI自动添加Mui-valid类）
          '&.Mui-valid': {
            // 默认状态下的底部边框
            '&::before': {
              borderBottomColor: '#2e7d32', // 自定义有效状态的默认边框色
            },
            // 聚焦状态下的底部边框
            '&::after': {
              borderBottomColor: '#1b5e20', // 自定义有效状态的聚焦边框色
            },

            // 处理endAdornment区域的边框同步
            '& .MuiInputAdornment-root': {
              position: 'relative',
              // 同步默认状态边框
              '&::before': {
                content: '""',
                position: 'absolute',
                bottom: 0,
                left: 0,
                right: 0,
                borderBottom: '1px solid #2e7d32',
                pointerEvents: 'none',
              },
              // 同步聚焦状态边框及动画
              '&::after': {
                content: '""',
                position: 'absolute',
                bottom: 0,
                left: 0,
                right: 0,
                borderBottom: '2px solid #1b5e20',
                pointerEvents: 'none',
                transform: 'scaleX(0)',
                transition: 'transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms',
              },
            },

            // 聚焦时触发装饰区域边框的动画
            '&:focus-within .MuiInputAdornment-root::after': {
              transform: 'scaleX(1)',
            },
          },
        },
      },
    },
  },
});

// 使用示例
function App() {
  return (
    <ThemeProvider theme={theme}>
      <TextField
        variant="standard"
        label="邮箱"
        type="email"
        defaultValue="test@example.com"
        endAdornment={
          <InputAdornment position="end">
            <span>@example.com</span>
          </InputAdornment>
        }
        style={{ width: 300, margin: 20 }}
      />
    </ThemeProvider>
  );
}

export default App;

关键说明 #

1. 定位正确的样式载体：standard变体的TextField底部边框是由MuiInput-root的::before（默认）和::after（聚焦）伪类绘制的，而非<input>元素本身。直接修改root的伪类样式，就能覆盖整个输入框宽度的边框，不会被endAdornment截断。
2. 利用MUI内置状态类：MUI会在输入内容有效时自动给MuiInput-root添加Mui-valid类，通过这个类可以精准定位有效状态的输入框。
3. 同步装饰元素区域的边框：给MuiInputAdornment-root添加对应的伪类样式，确保装饰元素区域的边框颜色和动画与输入框主体保持一致，避免视觉断裂。

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