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

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 prop 的错误，它不会从驼峰转换为连字符大小写文本对齐，而且我不能写文本对齐，因为它无效......我能做什么？

这是错误： 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