Material UI React не распознает свойство underlineStyle в элементе DOM

Я следовал примеру кода для стилизации цвета подчеркивания элемента 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.

Ваше здоровье

underlineStyle = {{borderColor : "orange500"}} (в кавычках) пробовали?

Tico 02.04.2018 17:17

Да, это все еще не работает. orange500 является частью пользовательского интерфейса материала, поэтому я включаю их в эту строку import {orange500, blue500} from 'material-ui/colors';

Chris Reeves 02.04.2018 19:09

Проверить stackoverflow.com/questions/50436542/…

enapupe 30.11.2018 23:54

@ChrisReeves, это должен быть material-ui/styles/colors, а не material-ui/colors

buhbang 01.12.2018 00:08
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
7
4
11 988
1

Ответы 1

Где-то в вашем коде вы передаете опору 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>

Chris Reeves 02.04.2018 20:10

Боюсь, это связано с MUI, включая ошибки в его обновленных версиях?

Emo 11.09.2018 09:17

Другие вопросы по теме