如何在Material UI多行TextField右上角放置按钮不重叠文字与滚动条

你要实现的效果可以通过外层容器相对定位+图标绝对定位的方式实现，不需要使用endAdornment，具体实现逻辑如下：

• 给TextField包裹一个外层容器，设置position: relative，作为图标定位的参照基准
• 把闪电图标单独放在外层容器内，设置position: absolute，调整top和right属性固定在右上角位置
• 给TextField的输入区域设置足够的右内边距，避免输入的文字和图标重叠

代码示例 #

import { Box, TextField, IconButton } from '@mui/material';
import FlashOnIcon from '@mui/icons-material/FlashOn';

function CustomTextField() {
  return (
    <Box sx={{ position: 'relative', width: '400px' }}>
      <TextField
        multiline
        maxRows={5}
        fullWidth
        label="输入内容"
        sx={{
          '& .MuiInputBase-input.MuiInputBase-inputMultiline': {
            // 右侧预留图标位置，数值可根据图标大小调整
            paddingRight: '40px'
          }
        }}
      />
      <IconButton
        size="small"
        sx={{
          position: 'absolute',
          // 调整数值适配你自己的组件边距
          top: '10px',
          right: '12px',
          zIndex: 1
        }}
      >
        <FlashOnIcon />
      </IconButton>
    </Box>
  )
}

原理解释 #

endAdornment是输入框内部的附属元素，对于多行带滚动条的TextField来说，endAdornment默认会被渲染在滚动条的外侧，且垂直方向和输入区域居中对齐，无法满足右上角定位的需求。使用独立的绝对定位图标可以完全脱离输入框内部布局约束，既不会和滚动条重叠，也可以自由调整位置。
你可以根据自己的项目UI规范调整top、right以及输入框右内边距的数值，适配不同的样式需求。

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