[TextField] No state class applied for readonly state

[noobDev31]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

I am trying to achieve the following permutation of styles with the Material UI TextField -

I am trying to remove the border of the input whenever I do readonly:true for the TextField.

But it doesn't take any effect and the reason can be that disabled and readonly are both getting the same CSS class.

Expected behavior 🤔

Readonly and Disabled should have a seperate CSS class so that they can targeted differently.

Sandbox - https://codesandbox.io/s/customizedinputs-demo-material-ui-forked-2unmw9?file=/index.tsx:809-870

Steps to reproduce 🕹

Steps:

1.Please open the following sandbox -
https://codesandbox.io/s/customizedinputs-demo-material-ui-forked-2unmw9?file=/index.tsx:809-870
and try giving the props -

InputProps={{ readOnly: true }}
to the LowCodeTextField component at index.tsx

2.The border doesn't get removed even though I have the class in the ThemeProviderconfig.ts
3.
4.

Context 🔦

No response

Your environment 🌎

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

[noobDev31]

Hi @hbjORbj any eta for this?

[michaldudak]

Thanks for the report @noobDev31. We could indeed use a class for the read-only state of the Input, to match the behavior of other states.

[noobDev31]

No issues @michaldudak. I just one need favor from you do you think this code -

is the right way( passing label as null to the TextField) to achieve to these designs -

or should I have broken the TextField the way the docs mentions - its made up of InputLabel, Input and FormHelperText and style all three of them separately.

[michaldudak]

You're losing association between label and input this way. Note that a label must have the for attribute or have the control it describes as its child.

[noobDev31]

So now we have a CSS class for the readonly?

[michaldudak]

After we release the next version (likely the next Monday).

[noobDev31]

Well thanks a lot for this 😊

[oliviertassinari]

Related to #9790.