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

Question

我一直在寻找有关此错误的信息，但找不到解决方案... 我正在使用样式化组件和 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 属性。如果您有意希望它作为自定义属性出现在 DOM 中，请将其拼写为小写 backgroundcolor。

Answer 1

styled-components 默认会自动将所有的 props 添加到 DOM 元素中，例如：

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

和react will check the props of the DOM element are legal。

另外，${(props, {color, backgroundColor, hoverColor, width} = props) 这一行看起来有点怪，应该只有一个参数。

你可以试试这个：

// avoid pass all props into button element
export const Btn = styled(({color, backgroundColor, hoverColor, width, ...props}) => <Button {...props} />)`
   ${(p = props) =>
      css`
        color: ${p.color ? p.color : white};
        background-color: ${p.backgroundColor ? p.backgroundColor : primaryColor} !important; 
        width: ${`${p.width}px` ? `${p.width}px` : '-webkit-fill-available'};
        border: none !important;

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

    `} 
`