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.

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

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