如何在mbrn/material-table行内编辑模式下修改输入框variant？

MUIv5确实把TextField的默认variant从v4的standard改成了outlined，后者自带边框和较多内外边距，行内编辑时容易出现样式错乱、占用空间过大的问题。不想用CSS覆盖的话，直接修改variant是更直接的方案，有两种常用方式：

1. 全局统一修改默认variant #

通过自定义主题，让所有TextField默认使用你需要的variant（比如standard或filled），一步到位：

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

// 自定义主题，指定TextField默认variant
const customTheme = createTheme({
  components: {
    MuiTextField: {
      defaultProps: {
        variant: 'standard', // 替换成你需要的variant，比如'filled'
      },
    },
  },
});

// 用ThemeProvider包裹根组件
function App() {
  return (
    <ThemeProvider theme={customTheme}>
      {/* 所有这里的TextField都会自动使用standard variant */}
      <TextField label="行内编辑输入框" />
    </ThemeProvider>
  );
}

2. 封装自定义TextField组件（局部批量修改） #

如果不想全局改动，只针对行内编辑的输入框调整，可以封装一个自定义组件，统一设置variant，之后行内场景都用这个组件：

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

// 自定义行内编辑专用TextField
export default function InlineEditTextField(props) {
  // 强制设置variant，同时保留传入的其他props
  return <TextField variant="standard" {...props} />;
}

之后在需要行内编辑的地方，直接用InlineEditTextField代替原生的TextField即可，不用每个输入框都手动加variant属性。

standard variant的样式最简洁，内外边距最小，很适合行内编辑场景；如果需要带背景的样式，可以换成filled，它的边距也比默认的outlined小很多。

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