[InputBase] - Add Mui-readOnly class

• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

When readonly attribute is set to true, add a Mui-readOnly (suggested name) class to the input / div associated. This already happens when disabled set to true (.Mui-disabled)

Examples 🌈

      <TextField
        id="filled-basic"
        label="Filled readOnly"
        variant="filled"
        value="text"
        disabled
        InputProps={{
          readOnly: true
        }}
      />

Motivation 🔦

I want my readOnly fields to behave in a specific way, in this specific case I want to set pointer-events: none when my fields are readonly.

As MUI wraps the input field with a div, even when my input has pointer-events: none, the div still keeps the default behavior like changing colors on hover, which is undesirable behavior.

There are different solutions for this but AFAIK all of them would need extra logic which I believe it would be avoided by having this class…I could do, for example:

 MuiFilledInput: {
        " & .Mui-readOnly": {
          pointerEvents: "none"
        }
      }

Also, there is already classes like Mui-focused, Mui-error and Mui-disabled, I believe Mui-readOnly would be a nice addition.

[Samuel-Beslogic]

+1 I’d even ask for readonly to be a prop of InputBase (and by extension, TextField)

[ZeeshanTamboli]

readOnly prop was added for Input in #33654 which was released in @mui/material@5.9.3.