移动端MUI文本框如何突破flex父容器宽度占满屏幕？

方法1：利用Flex换行让文本框独占一行 #

核心思路是在移动端让flex容器允许换行，同时强制文本框所在的flex子元素占满整行宽度，这样文本框设置width:100%就能继承满屏宽度。

1. 给flex容器添加移动端媒体查询，开启换行：

.flex-parent {
  display: flex;
}

@media (max-width: 600px) {
  .flex-parent {
    flex-wrap: wrap;
  }
}

2. 给文本框的直接父元素（flex子元素）设置移动端独占一行：

<div className="flex-parent">
  {/* 其他同行元素 */}
  <div style={{ flex: 1 }}>
    {/* 非移动端显示的内容 */}
  </div>
  {/* 文本框容器 */}
  <div style={{
    '@media (max-width: 600px)': {
      flex-basis: '100%',
      width: '100%'
    }
  }}>
    <TextField
      sx={{ width: '100%' }}
      label="编辑文本"
      variant="outlined"
    />
  </div>
</div>

3. 强制覆盖MUI文本框的内部宽度限制：
   如果文本框仍未占满，给TextField添加sx样式覆盖内部输入框宽度：

<TextField
  sx={{
    width: '100%',
    '& .MuiOutlinedInput-root': {
      width: '100%',
    },
    '@media (max-width: 600px)': {
      width: '100%',
    }
  }}
  label="编辑文本"
  variant="outlined"
/>

方法2：突破父容器宽度限制（不依赖flex-wrap） #

如果flex容器无法设置换行，用margin偏移让文本框直接占满屏幕宽度，且不使用vw单位：

<TextField
  sx={{
    '@media (max-width: 600px)': {
      width: '100%',
      // 利用父容器的居中偏移实现满屏
      marginLeft: 'calc(-50% + 50vw)',
      marginRight: 'calc(-50% + 50vw)',
      // 确保父容器不裁剪文本框
      maxWidth: 'unset',
    }
  }}
  label="编辑文本"
  variant="outlined"
/>

同时给flex容器添加overflow-x: visible，避免出现横向滚动条：

@media (max-width: 600px) {
  .flex-parent {
    overflow-x: visible;
  }
}

方法3：绝对定位锁定全屏宽度 #

如果以上方法都不适用，可在移动端用绝对定位让文本框脱离flex布局，直接铺满屏幕：

<div className="flex-parent" style={{ position: 'relative' }}>
  {/* 其他元素 */}
  <TextField
    sx={{
      '@media (max-width: 600px)': {
        position: 'absolute',
        left: 0,
        right: 0,
        width: '100%',
        // 避免覆盖其他元素，可调整top值
        top: '100%',
        marginTop: 1,
      }
    }}
    label="编辑文本"
    variant="outlined"
  />
</div>

注意：这种方法需要调整其他元素的布局，防止被文本框覆盖。

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