如何移除Material-UI v4中TextField组件的边框

当前使用版本为 Material-UI 4，非MUI v5版本，要移除standard变体TextField的所有边框/下划线，你之前的代码失效有两个核心原因，下面给出可直接生效的写法：

最简实现（推荐） #

MUI 4的Input组件原生提供了disableUnderline属性，直接传入即可一键隐藏所有状态下的下划线，不需要额外写样式覆盖：

<TextField
  disabled={true}
  variant="standard"
  InputProps={{ 
    disableUnderline: true,
    style: { backgroundColor: '#d6eaf8', fontSize: '18px', color: 'black' }
  }}                   
/>

样式覆盖写法（自定义样式场景用） #

如果需要通过CSS类自定义样式覆盖，注意不要把underline规则直接写在InputProps根层级，要放到InputProps.classes下，同时需要覆盖禁用状态的专属下划线规则：

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

const useStyles = makeStyles({
  customInput: {
    backgroundColor: '#d6eaf8',
    fontSize: '18px',
    color: 'black',
    // 同时覆盖默认、聚焦、禁用三种状态的下边框
    '&:before': {
      borderBottom: 'none'
    },
    '&:after': {
      borderBottom: 'none'
    },
    '&.Mui-disabled:before': {
      borderBottom: 'none'
    }
  }
});

// 组件内调用
const classes = useStyles();
<TextField
  disabled={true}
  variant="standard"
  InputProps={{
    classes: {
      underline: classes.customInput
    }
  }}
/>

原代码失效原因 #

• 样式层级写错：underline相关的覆写规则需要放在InputProps.classes对象下，直接挂在InputProps根节点组件无法识别
• 遗漏禁用态选择器：TextField为disabled状态时，会自带.Mui-disabled类名，该类名下的下划线样式优先级高于普通伪类选择器，不单独覆盖的话禁用态下边框会一直显示

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