Question

...如果您有意让它作为自定义项出现在DOM中属性，则将其拼写为小写textalign。如果你意外地从父组件传递了它，将其从DOM中删除元素。

当尝试将styled-system与material-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>

它不能阻止应用程序正常运行，但警告正在污染调试控制台...

Answer 1

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

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

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

应该直接使用所需的所有自定义样式（作为道具传递）来创建包装器组件，而不是直接设计UiTableCell的样式，并将UiTableCell内容放入其中。

根据您的示例在此处查看完整的演示：https://codesandbox.io/s/n91k87r26p

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

1 个答案: