在material-ui中使用TextField对象的inputProps时使用带有连字符的css属性

Question

so im trying to customize a TextField component in material-ui, and i read about the inputProps attribute which can help me center the text, unfortunately i tried something like this:

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

but than i get an error about textAlign prop, it won't convert from camelCase into a hyphen case text-align, and i can't write text-align instead because its invalid... what can i do?

heres the error: React does not recognize the textAlign prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase textalign instead. If you accidentally passed it from a parent component, remove it from the DOM element.

thanks alot!

Answer 1

You can use a quoted property name:

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

Notice the {"text-align": 'center',} on the last line. The left-hand side (name) of a property initializer can be quoted (single or double quotes) if the name won't be a valid identifier (in your case, because of the hyphen).

Simpler example:

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