Material-ui: TextField ignores prop InputProps{disableUnderline} and passes it down to DOM element.

[SmartArtsStudio]

• [x] This is not a v0.x issue.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

<TextField  defaultValue="Hello" variant="outlined" InputProps={{ disableUnderline: true }} />

Docs say should remove the underline from the nested Input Field.

Current Behavior 😯

Either TextField or Input is ignoring the prop. React Errors: "React does not recognize the disableUnderline prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase disableunderline instead. If you accidentally passed it from a parent component, remove it from the DOM element."
Similar to #13717 But looks like they only addressed TextField variant 'filled'.
Still exists @material-ui/core": "3.9.3"

Steps to Reproduce 🕹

Link:

2. #13717
   3.
   4.

Context 🔦

Just trying to render a TextField variant="outlined" without it underlining the input field, without hacking the css.

Your Environment 🌎

| Tech | Version |
|--------------|---------|
| Material-UI | v3.9.3 |
| React | 16.8.3 |
| Browser | Chrome |
| TypeScript | |
| etc. | |

[joshwooding]

Can you follow and fill out the issue template please. A code example is ideal as well.

I would make sure you are using InputProps instead of inputProps capitalisation is important here.

[SmartArtsStudio]

Completed. You caught the issue faster than I completed the template, that's service! :)

[gustav1105]

Is there anyway to remove the underline from a textfield without the browser error using material ui 4.9 ?
React does not recognize the disableUnderline prop on a DOM element.

[oliviertassinari]

Note that disableUnderline is only supported by the filled and standard text fields. It's not supported by the outlined variant.

[gustav1105]

"@material-ui/core": "^4.9.14",
"react": "^16.13.1",

The component in question is a filled Textfield.
<TextField onClick={() => set(true)} inputProps={{ disableUnderline:true }} variant="filled" color="primary" value={'value'} />

-> React does not recognise the disableUnderline prop on a DOM element.

[oliviertassinari]

https://github.com/mui-org/material-ui/issues/15502#issuecomment-487119928 InputProps !== inputProps

[gustav1105]

Both are accepted and does different things?
onClick={() => set(true)}
inputProps={{
className: classes.styledInputField, //changes are different
}}
InputProps={{
disableUnderline: true,
className: classes.styledInputField, //changes are different
}}/>

Should i stop using inputProps all together? thanks

[oliviertassinari]

See #11377