Material-UI React does not recognize the `underlineStyle` prop on a DOM element

Question

I have followed the example code for styling the underline color of a material-UI TextField element.

http://www.material-ui.com/#/components/text-field

However when I try to add my own style, react cannot recognize this property.

<TextField type="number" id="Commission" label="Commission" underlineStyle={{borderColor : orange500}} fullWidth /> 

I get the following error message in the chrome developer console

warning.js:33 Warning: React does not recognize the `underlineStyle` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `underlinestyle` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    in div (created by FormControl)
    in FormControl (created by WithStyles(FormControl))
    in WithStyles(FormControl) (created by TextField)
    in TextField (created by Commissions)
    in div (created by Commissions)
    in div (created by Commissions)
    in Commissions
    in ReactPlaceholder (created by AsyncFunc)
    in AsyncFunc (created by Route)
    in Route (created by App)
    in div (created by App)
    in main (created by App)
    in div (created by App)
    in div (created by App)
    in App (created by Connect(App))
    in Connect(App) (created by Route)
    in Route (created by RestrictedRoute)
    in RestrictedRoute (created by App)
    in div (created by App)
    in IntlProvider (created by App)
    in MuiThemeProvider (created by App)
    in App (created by Connect(App))
    in Connect(App) (created by Route)
    in Route (created by MainApp)
    in Switch (created by MainApp)
    in Router (created by ConnectedRouter)
    in ConnectedRouter (created by MainApp)
    in Provider (created by MainApp)
    in MainApp

npm view material-ui version 0.20.0

I have confirmed that this property exists on the TextField element.

I am using the Jumbo React theme, and all of the underline colors of the Textfields default to purple.

Not sure why my custom style does not override the TextField underline color.

Algolagnia

Did you try underlineStyle={{borderColor : "orange500"}} (with quotes)? – Aboulia

Yea it still doesn't work. orange500 is part of material-UI so I include them with this line import {orange500, blue500} from 'material-ui/colors'; – Algolagnia

Check #50437042 – Calder

@ChrisReeves it should be material-ui/styles/colors not material-ui/colors – Poniard

Answer 1

In Material-UI v5, if you're using styled() function to create custom components, you may run into this problem when using custom props. To solve it, you need to override shouldForwardProp callback and filter out props that shouldn't be passed to the DOM elements:

const Div = styled("div", {
  shouldForwardProp: (props) =>
    props !== "bgColor" && props !== "width" && props !== "height"
})((p) => ({
  backgroundColor: p.bgColor,
  width: p.width + "px",
  height: p.height + "px"
}));

export default function Why() {
  return (
    <>
      <Div width={30} height={30} bgColor="purple" />
      <Div width={60} height={60} bgColor="blue" />
      <Div width={120} height={120} bgColor="green" />
    </>
  );
}

Live Demo

Webber

Answer 2

Somewhere in your code, you are passing down the underlineStyle prop to a regular DOM element (in this case, a div) instead of a react component

When you use JSX to render regular DOM elements, you should only pass valid DOM attributes as props.

This is valid, because all of the attributes are valid DOM attributes

<div className="Bla" id="x" style={{color: 'red'}}>
  ...
</div>

This isn't valid, since myOwnCustomProp is not a valid DOM attribute

<div myOwnCustomProp='I should not be here'>
  ...
</div>

This is not an error, just a warning introduced in the later React versions. More info here

Intussuscept

When I inspect the page source I see this <div class="MuiFormControl-root-76 MuiFormControl-fullWidth-79" underlinestyle="[object Object]"><label class="MuiFormLabel-root-86 MuiInputLabel-root-80 MuiInputLabel-formControl-81 MuiInputLabel-animated-84" data-shrink="false" for="Commission">Commission</label><div class="MuiInput-root-92 MuiInput-fullWidth-99 MuiInput-formControl-93 MuiInput-underline-96"><input type="number" aria-invalid="false" aria-required="false" class="MuiInput-input-100 MuiInput-inputType-104" id="Commission"></div></div> – Algolagnia

I'm afraid this has to do with MUI including bugs with its updated versions? – Entresol