如何为Material-UI的TextField组件设置maxWidth？

问题根源在父组件Box的样式设置上：

sx={{
  "& > :not(style)": { m: 1, width: "25ch" }
}}

这里的width: "25ch"给所有直接子元素（包括每个TextField）强制设置了固定宽度，这个样式优先级覆盖了你在TextField上设置的maxWidth，所以不管怎么调整TextField的宽度，都会被固定在25ch（约200px）。

要实现宽度自适应内容，最多扩展到350px的需求，按以下步骤修改：

1. 移除Box中的固定宽度限制
   删掉& > :not(style)里的width: "25ch"，避免强制固定子元素宽度。

2. 给TextField设置自适应+最大宽度样式
   通过sx给TextField设置width: 'fit-content'让它自适应内容宽度，同时设置maxWidth: 350限制最大宽度。因为是多行输入，确保multiline属性开启，还可以根据需要设置minRows控制最小行数。

修改后的完整代码：

import * as React from "react";
import Box from "@mui/material/Box";
import TextField from "@mui/material/TextField";

export default function BasicTextFields() {
  const messages = [
    { id: 1, message: "short message" },
    {
      id: 2,
      message: " It comes with three variants: outlined."
    },
    {
      id: 3,
      message:
        "The TextField wrapper component is a complete form control including a label, input, and help text."
    }
  ];
  return (
    <Box
      component="form"
      sx={{
        "& > :not(style)": { m: 1 } // 移除固定宽度限制
      }}
      noValidate
      autoComplete="off"
      style={{ display: "flex", flexDirection: "column" }}
    >
      {messages.map((e) => (
        <TextField
          id="outlined-basic"
          key={e.id}
          value={e.message}
          label="Outlined"
          variant="outlined"
          multiline={true}
          minRows={1} // 可选：控制输入框最小行数
          sx={{ 
            maxWidth: 350, 
            width: 'fit-content',
            // 确保输入区域占满TextField宽度，内容过长时自动换行
            '& .MuiOutlinedInput-root': {
              width: '100%'
            }
          }}
        />
      ))}
    </Box>
  );
}

补充说明：

• width: 'fit-content'让TextField宽度跟随内容长度变化，不会超出内容所需的最小宽度
• maxWidth: 350确保内容过长时，宽度最多到350px，此时multiline会自动换行显示剩余内容
• 额外添加的& .MuiOutlinedInput-root: { width: '100%' }是为了让输入框内部容器占满TextField宽度，避免出现内容换行但边框没跟着扩展的情况

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