如何不使用MUIThemeProvider通过props修改Material-UI TextField并隐藏下划线

嘿，我来帮你搞定这个问题！不用修改全局主题，确实可以通过组件props直接隐藏TextField的下划线，你之前可能没找对正确的props使用方式～

1. 官方推荐的最简方案：disableUnderline #

这是最直接的方法，Material-UI的Input组件提供了disableUnderline属性，能完全禁用下划线（包括默认、hover、focus所有状态）。不过要注意，这个属性需要放在TextField的InputProps里，因为TextField是对Input的封装，直接给TextField传disableUnderline是不生效的：

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

export default function NoUnderlineTextField() {
  return (
    <TextField
      label="无下划线输入框"
      placeholder="试试输入内容"
      InputProps={{
        disableUnderline: true
      }}
    />
  );
}

2. 更灵活的样式自定义（按需隐藏） #

如果你不想完全禁用，只是想修改下划线的样式（比如只隐藏默认状态，保留hover时的效果），可以通过InputProps里的样式配置来覆盖：

MUI v5 用sx属性（推荐）

<TextField
  label="自定义下划线"
  InputProps={{
    sx: {
      // 隐藏默认状态的下划线
      '& .MuiInput-underline:before': {
        borderBottom: 'none'
      },
      // 可选：隐藏hover状态的下划线
      '& .MuiInput-underline:hover:before': {
        borderBottom: 'none'
      },
      // 可选：隐藏focus状态的下划线
      '& .MuiInput-underline:after': {
        borderBottom: 'none'
      }
    }
  }}
/>

MUI v4 用classes属性

import { makeStyles } from '@material-ui/core/styles';
import TextField from '@material-ui/core/TextField';

const useStyles = makeStyles({
  customUnderline: {
    '&:before': {
      borderBottom: 'none !important',
    },
    '&:hover:before': {
      borderBottom: 'none !important',
    },
    '&:after': {
      borderBottom: 'none !important',
    }
  }
});

export default function CustomTextField() {
  const classes = useStyles();
  return (
    <TextField
      label="无下划线输入框"
      InputProps={{
        classes: {
          underline: classes.customUnderline
        }
      }}
    />
  );
}

为什么你之前的方法无效？ #

你提到尝试修改underline属性但没用，是因为Input组件的underline属性并不是用来控制显示隐藏的——它的作用是传递自定义的下划线元素（比如替换成自定义的DOM节点），而不是开关下划线的显示。所以要禁用下划线，必须用上面的disableUnderline或者样式覆盖的方式。

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