在material-ui中使用TextField對象的inputProps時使用帶有連字符的css屬性

Question

所以我試圖在 material-ui 中自定義一個 TextField 組件，我閱讀了可以幫助我居中文本的 inputProps 屬性，不幸的是我嘗試了這樣的事情：

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

但是比我收到關於 textAlign 道具的錯誤，它不會從駝峰式大小寫轉換為連字符大小寫文本對齊，而且我不能寫文本對齊，因為它無效......我能做什么？

這是錯誤：React 無法識別 DOM 元素上的textAlign 。 如果您有意希望它作為自定義屬性出現在 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