如何修改MUI标准TextField组件::after伪元素的边框颜色

你的写法无效原因有两点：

1. 标准变种（standard）的TextField，底部高亮边框的::after伪元素挂载在.MuiInput-root容器元素上，而非<input>标签本身
2. 内联style属性不支持嵌套类选择器和伪元素语法

下面是几种可行的解决方案：

方案1：使用MUI v5推荐的sx属性（最便捷） #

直接在TextField上通过sx属性定义样式，sx支持嵌套选择器且优先级足够覆盖默认样式：

<TextField
  id="standard-basic"
  label="Email"
  variant="standard"
  sx={{
    '& .MuiInput-root::after': {
      borderBottom: '2px solid red',
    },
  }}
/>

方案2：创建Styled自定义组件（适合样式复用） #

通过styled工具封装带自定义样式的TextField，方便多处复用：

import { TextField } from '@mui/material';
import { styled } from '@mui/material/styles';

const StyledTextField = styled(TextField)({
  '& .MuiInput-root::after': {
    borderBottom: '2px solid red',
  },
});

// 使用自定义组件
<StyledTextField id="standard-basic" label="Email" variant="standard" />

方案3：使用makeStyles（兼容MUI v4/v5） #

如果习惯用类名控制样式，可通过makeStyles创建自定义类：

import { makeStyles } from '@mui/styles';
import { TextField } from '@mui/material';

const useStyles = makeStyles({
  customTextField: {
    '& .MuiInput-root::after': {
      borderBottom: '2px solid red',
    },
  },
});

function YourComponent() {
  const classes = useStyles();
  return (
    <TextField
      id="standard-basic"
      label="Email"
      variant="standard"
      className={classes.customTextField}
    />
  );
}

扩展：修改其他状态的边框颜色 #

如果需要同时调整默认、hover状态的下划线，可补充对应伪元素样式：

sx={{
  '& .MuiInput-root::before': {
    borderBottom: '1px solid #999', // 默认未聚焦时的下划线
  },
  '& .MuiInput-root::after': {
    borderBottom: '2px solid red', // 聚焦时的高亮边框
  },
  '& .MuiInput-root:hover:not(.Mui-focused):not(.Mui-error)::before': {
    borderBottom: '2px solid orange', // 未聚焦hover时的边框
  },
}}

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