Javascript React无法识别DOM元素上的'backgroundColor'属性

我已经搜索了一段时间有关此错误的信息，但找不到解决方案。。。 我正在使用样式化组件和ant.design

按钮组件

import React from 'react'
import {Btn} from './style';

const ComponentButton = (props) =>{

  const  {title, backgroundColor,color, hoverColor, handleClick,shape} = props

 return(
      <Btn 
        shape={shape || "round"} 
        onClick={handleClick}
        backgroundColor={backgroundColor}
        color={color}
        hoverColor={hoverColor}
      >
         {title}   
      </Btn>
  )
}

export default ComponentButton;

import styled, {css} from 'styled-components';
import {primaryColor, white} from '../../../../config';
import { Button } from 'antd';



export const Btn = styled(Button)`
   ${(props, {color, backgroundColor, hoverColor, width} = props) =>
      css`
        color: ${color ? color : white};
        background-color: ${backgroundColor ? backgroundColor : primaryColor} !important; 
        width: ${`${width}px` ? `${width}px` : '-webkit-fill-available'};
        border: none !important;

        &:hover, &:focus{
          color: ${hoverColor ? hoverColor : white};
          border: none !important;
        }
        &:after{
          box-shadow: none !important;
        }

    `} 
` 

我不知道为什么我仍然得到这个错误：

---

React无法识别DOM元素上的

backgroundColor

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

backgroundcolor

。

样式化组件默认情况下将自动将所有道具添加到DOM元素中，例如：

  <button backgroundColor="" color="" hoverColor="" ... />

样式化组件
默认情况下会自动将所有道具添加到DOM元素中，例如：

  <button backgroundColor="" color="" hoverColor="" ... />