TextField ignores prop InputProps{disableUnderline} and passes it down to DOM element.

[SmartArtsStudio]

• This is not a v0.x issue.
• 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:

1. <TextField defaultValue="Hello" variant="outlined" InputProps={{ disableUnderline: true }} />
2. Filled TextField doesn't respect disableUnderline input prop #13717

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]

#15502 (comment) InputProps !== inputProps

[gustav1105]

Both are accepted and does different things?
<TextField
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

[frindly]

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

Even though standard is the default variant, I get this runtime error if I don't explicitly specify variant='standard' even though from a rendering point of view it works as expected.

[magrega]

Hey everyone! I encountered similiar issue. I am disabling underline right in the theme. Everything works but I get the " React does not recognize the disableUnderline prop on a DOM element" error in the console. Is there anything I can do to correct this?

const theme = createTheme({ palette: { inputBackgroundColor: { main: '#F7F7F7', }, }, components: { MuiInputBase: { defaultProps: { disableUnderline: true, }, }, MuiTextField: { styleOverrides: { root: { '& .MuiInputBase-root': { backgroundColor: '#F7F7F7', border: '1px solid #E7E7E7' }, '& .MuiInputBase-root:before': { borderBottom: 'none' } }, }, }, }, });