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

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 ponent, 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.

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

http://www.material-ui./#/ponents/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 ponent, 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.

• javascript
• reactjs
• material-ui

• 1 Did you try underlineStyle={{borderColor : "orange500"}} (with quotes)? – trinaldi Commented Apr 2, 2018 at 15:17
• 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'; – Chris Reeves Commented Apr 2, 2018 at 17:09
• Check stackoverflow./questions/50436542/… – enapupe Commented Nov 30, 2018 at 22:54
• @ChrisReeves it should be material-ui/styles/colors not material-ui/colors – buhbang Commented Nov 30, 2018 at 23:08

2 Answers 2

In Material-UI v5, if you're using styled() function to create custom ponents, 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

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 ponent

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