[material-ui][Text Field] Multiline variant cannot be made to scroll horizontally

Summary

The TextareaAutosize when rendered by a TextField with multiline applies overflow: hidden to the resulting textarea dom element as an inline style in the current implementation.

This prevents the usecase I have, which is a textarea form input element that can grow vertically based on the size of the text contents, while also respecting whitespace and scrolling in the horizontal direction.

The fix should be as simple as splitting the overflow into overflow-x and overflow-y and applying these as css instead of inline styles so they can be overwritten.

Examples

https://github.com/mui/material-ui/blob/master/packages/mui-base/src/TextareaAutosize/TextareaAutosize.tsx#L135 (existing implementation)

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

...
<TextField
  error={!!errors?.someInput}
  label="Some label"
  InputLabelProps={{
    shrink: true
  }}
  multiline
  fullWidth
  minRows={6}
  variant="outlined"
  InputProps={{
    sx: {
      ['textarea']: {
        whiteSpace: 'pre',
        overflowX: 'auto' // requires !important, cannot be accessed or overwritten otherwise
      }
    }
  }}
  helperText={errors?.someInput?.message}
  {...register('someInput')}
/>
...

Desired configurable behavior in in mp4 format:

Motivation

I am trying to make aTextfield that renders as a textarea, while allowing me to scroll horizontally while respecting whitespace. Preserving the behavior of: expanding vertically dynamically based on the users input, as many lines as necessary without restriction (the same as the current TextareaAutosize implementation).

I know I could assign a max number of rows. But I think there is a valid usecase with the want to expand vertically in an unlimited fashion within a scroll container, while also being able to override the inline overflow style.

Search keywords: textfield textarea mui core

Start at packages/mui-base/src/TextareaAutosize/TextareaAutosize.tsx around line 135, where the textarea's overflow style is applied. Verify how the TextField multiline variant derives this element's styles, then confirm that horizontal overflow can be configured without !important while vertical autosizing and whitespace preservation remain intact.