How to apply maxWidth to TextField component from mui? - reactjs

Question

I'm trying to apply maxWidth to the TextField from material-ui but it seems like I can't.
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, width: "25ch" }
}}
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}
style={{ maxWidth: "350px" }}
/>
))}
</Box>
);
}
Currently, the max-width for TextField seems not applying correctly. If I look at TextField with the inspect, it says 200px
I know I can apply regular width like this.
<TextField
id="outlined-basic"
key={e.id}
value={e.message}
label="Outlined"
variant="outlined"
multiline={true}
style={{ width: "350px" }}
/>
But what I want here is maxWidth.
Ideally, I like to have the width of text input based on the message length which I pass to the value property like this value={e.message}.
So before the width hits 350px, width needs to be kind of auto like the width is depends on the message, but once it hits 350px, it will keep being 350px.
Is that possible with the TextField component?
Attampts
I used InputProps proptery.
{messages.map((e) => (
<TextField
id="outlined-basic"
key={e.id}
value={e.message}
label="Outlined"
variant="outlined"
multiline={true}
InputProps={{
style: { maxWidth: "350px" }
}}
/>
))}
But I got width 200px.

Answer 1

if you wrap in an div?
<div style: { width: "400px" }>
<TextField
id="outlined-basic"
key={e.id}
value={e.message}
label="Outlined"
variant="outlined"
multiline={true}
InputProps={{
style: { maxWidth: "350px" }
}}
/>
</div>