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

Posted 2023-02-22

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

【英文标题】：use css attribute with hyphen while using inputProps of TextField object in material-ui

【发布时间】：2019-02-26 21:51:40

【问题描述】：

所以我试图在 material-ui 中自定义一个 TextField 组件， 我读到了 inputProps 属性，它可以帮助我使文本居中，不幸的是我尝试了这样的事情：

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

但是我得到一个关于 textAlign 属性的错误，它不会从 camelCase 转换为连字符大小写 text-align，而且我不能写 text-align，因为它无效......我该怎么办？

这是错误： React 无法识别 DOM 元素上的 textAlign 属性。如果您有意希望它作为自定义属性出现在 DOM 中，请将其拼写为小写 textalign。如果您不小心从父组件传递了它，请将其从 DOM 元素中移除。

非常感谢！

【参考方案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

【讨论】：

非常感谢，我真的不知道转义...你知道我可以如何注入带有 text-align:center 作为属性的 style 属性吗？因为现在 text-align:center 不起作用，因为如果你想设置一个输入组件的样式，你必须将它注入到他的样式属性中，就像我现在看到的那样......

没关系，我玩了一下，发现了如何做到这一点：inputProps="style":textAlign:"center"