React MUI TextField添加multiline时出现嵌套边框的原因及解决方法

当给MUI的TextField添加multiline属性后出现双层边框或内层边距的问题，本质是内层TextareaAutosize组件自带内边距，和外层TextField的边框容器形成了视觉上的双层效果。以下是几种有效的解决方式：

方法一：使用sx属性直接覆盖样式 #

直接在TextField组件中通过sx属性精准定位内层输入框元素，修改其边距和边框：

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

function App() {
  return (
    <TextField
      multiline
      rows={4}
      variant="outlined"
      label="多行输入框"
      sx={{
        // 定位内层输入框，去除内边距和边框
        '& .MuiInputBase-input': {
          padding: 0,
          border: 'none',
          // 聚焦时移除默认轮廓，避免再次出现边框
          '&:focus': {
            outline: 'none',
          }
        },
        // 可选：调整外层边框容器的内边距，让整体更贴合
        '& .MuiOutlinedInput-notchedOutline': {
          padding: 0,
        }
      }}
    />
  );
}

方法二：通过styled组件自定义TextField #

如果需要在多处复用该样式，可用MUI的styled工具封装自定义组件：

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

const CustomMultilineTextField = styled(TextField)(({ theme }) => ({
  '& .MuiInputBase-input': {
    padding: 0,
    border: 'none',
    '&:focus': {
      outline: 'none',
    },
  },
  '& .MuiOutlinedInput-notchedOutline': {
    padding: 0,
  },
}));

// 使用自定义组件
function App() {
  return (
    <CustomMultilineTextField 
      multiline 
      rows={4} 
      variant="outlined" 
      label="自定义多行输入框" 
    />
  );
}

注意事项 #

• 若使用filled或standard变体，需替换对应的选择器：
  • filled变体：& .MuiFilledInput-input
  • standard变体：& .MuiInput-input
• 之前样式不生效大概率是选择器优先级不足，或未精准命中MUI内部DOM元素，以上针对MUI内置类名的样式覆盖方式，能确保样式优先级足够。

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