использовать атрибут css с дефисом при использовании inputProps объекта TextField в material-ui

Question

, поэтому я пытаюсь настроить компонент TextField в material-ui, и я прочитал об атрибуте inputProps, который может помочь мне центрировать текст, к сожалению, я попробовал что-то вроде этого:

<TextField
  required
  id="userName"
  label="User name:"
  defaultValue="enter your user name"
  margin="normal"
  fullWidth={true}
  inputProps={{ textAlign: 'center', }}
/>

, но чем яполучить сообщение об ошибке textAlign prop, он не будет преобразован из camelCase в перенос текста text-align, и вместо этого я не могу написать text-align, потому что это неверно ... что я могу сделать?

вотошибка: React не распознает пропелу textAlign в элементе DOM.Если вы намеренно хотите, чтобы он отображался в DOM как пользовательский атрибут, вместо этого пишите его строчными буквами textalign.Если вы случайно передали его из родительского компонента, удалите его из элемента DOM.

спасибо большое!

Answer 1

Вы можете использовать указанное в кавычках имя свойства:

<TextField
     required
     id="userName"
     label="User name:"
     defaultValue="enter your user name"
     margin="normal"
     fullWidth={true}
     inputProps={{"text-align": 'center',}}
 />

Обратите внимание на {"text-align": 'center',} в последней строке.Левая часть (имя) инициализатора свойства может быть заключена в кавычки (одинарные или двойные кавычки), если имя не будет допустимым идентификатором (в вашем случае из-за дефиса).

Более простой пример:

var obj = {
  "name-with-hyphen": 42
};
console.log(obj["name-with-hyphen"]); // 42