Я следовал примеру кода для стилизации цвета подчеркивания элемента TextField UI материала.
http://www.material-ui.com/#/components/text-field
Однако когда я пытаюсь добавить свой собственный стиль, react не может распознать это свойство.
<TextField type = "number" id = "Commission" label = "Commission" underlineStyle = {{borderColor : orange500}} fullWidth />
Я получаю следующее сообщение об ошибке в консоли разработчика Chrome
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 просмотреть материал-версия пользовательского интерфейса 0.20.0
Я подтвердил, что это свойство существует в элементе TextField.
Я использую тему Jumbo React, и все цвета подчеркивания текстовых полей по умолчанию фиолетовые.
Не уверен, почему мой собственный стиль не отменяет цвет подчеркивания TextField.
Ваше здоровье
Да, это все еще не работает. orange500 является частью пользовательского интерфейса материала, поэтому я включаю их в эту строку import {orange500, blue500} from 'material-ui/colors';
Проверить stackoverflow.com/questions/50436542/…
@ChrisReeves, это должен быть material-ui/styles/colors, а не material-ui/colors



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Где-то в вашем коде вы передаете опору underlineStyle обычному DOM element (в данном случае div) вместо компонента react.
Когда вы используете JSX для рендеринга обычного DOM elements, вы должны передавать только действительный DOM attributes как props.
Это действительно так, потому что все атрибуты действительны DOM attributes.
<div className = "Bla" id = "x" style = {{color: 'red'}}>
...
</div>
Это недопустимо, поскольку myOwnCustomProp не является действительным DOM attribute.
<div myOwnCustomProp='I should not be here'>
...
</div>
Это не ошибка, а просто предупреждение, появившееся в более поздних версиях React. Подробнее здесь
Когда я просматриваю источник страницы, я вижу этот <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>
Боюсь, это связано с MUI, включая ошибки в его обновленных версиях?
underlineStyle = {{borderColor : "orange500"}}(в кавычках) пробовали?