React错误状态

今天使用React写组件的时候突然发现了一个报错：
React does not recognize the marginTop prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase margintop instead. If you accidentally passed it from a parent component...

然后就开始疯狂的找原因，是因为将不属于DOM的组件属性传给了DOM，

interface StylePorps {
  buttonWidth?: string;
};

interface StylePropsAfter extends StyleProps {
  marginLeft?: string;
  border?: string;
}

const Button: FC<StylePorps> => ({
  buttonWidth = '180px',
  ...props
}) => (
  <div buttonWidth={buttonWidth} {...props}>
    <button {...props} />
  </div>
)

最后解决方法，将属性分离就好了：

interface StylePorps {
  buttonWidth?: string;
  marginLeft?: string;
};

interface StylePropsAfter extends StyleProps {
  border?: string;
}

const Button: FC<StylePropsAfter> => ({
  buttonWidth = '180px',
  marginLeft = '20px'
  ...props
}) => (
  <div buttonWidth={buttonWidth} marginLeft={marginLeft} {...props}>
    <button {...props} />
  </div>
)