Material ui 警告：React无法识别DOM元素上的'textAlign'属性

。。。如果您有意将其作为自定义项显示在DOM中 属性，将其拼写为小写

textalign

。如果你 意外地从父组件传递了它，请将其从DOM中删除 元素

我在尝试将

样式化系统

与

材质ui

结合使用时收到此警告

守则：

const textAlign = style({
  // React prop name
  prop: "textAlign",
  // The corresponding CSS property (defaults to prop argument)
  cssProperty: "textAlign",
  // key for theme values
  key: "textAlign",
  // accessor function for transforming the value
  transformValue: (n: string) => {
    return `${n} !important;`
  }
  // add a fallback scale object or array, if theme is not present
})

export const UiTableCell = uiTableCell`
   ${fontSize};
   ${textAlign};
   border-bottom: none !important;
   padding-top: 8px !important;
   padding-right: 20px !important; 
   padding-left: 20px !important; 
   padding-bottom: 8px !important;
   white-space: nowrap;
   position: relative;
   color: ${(props) => (props.color ? props.color : theme.colors.text)} !important;
`

及其在组件中的用法：

<UiTableCell textAlign="right" fontSize={[2]}>
  <Text ml={[4]}>{stuff}</Text>
</UiTableCell>

{stuff}

---

它不会阻止应用程序工作，但警告正在污染调试控制台…

似乎UiTableCell组件正在传递它无法识别的所有属性。只要呈现“td”标记，就会产生一个DOM节点，如：

<td textAlign="right"></td>

其中“textAlign”未解析为有效的HTML属性

您不应该直接设置UiTableCell的样式，而应该创建一个包含所有自定义样式（作为道具传递）的包装器组件，并将UiTableCell内容放在其中

---

根据您的示例检查完整演示：

您是否可以使用可复制的链接更新问题？也许是密码沙盒？