使用 styled-components 时没有重载匹配此调用

Question

关于 SO 上的此错误有几个问题，但没有任何人在类似情况下提出问题，而且我找到的解决方案都没有工作，因此我将发布一个具体问题。

当在另一个组件中使用 Styled 组件并将 props 传递给它时，我是否必须创建一个新类型来将 props 传递给 styled 组件，或者有什么方法可以使用现有的 styled 组件类型？

这是我的代码。似乎是 as="" 属性给出了上述错误。我认为这与我的组件只接受 prop 的事实有关，因此它可以将其传递给样式化组件，因为它是样式化组件的一个特征。

import React from 'react'
import styled from 'styled-components'

type Props = {
    additionalClass?: string,
    as?: string
}

const Component: React.FC<Props> = (props) => {

    return (

        <StyledComponent as={props.as} className={props.additionalClass}>
            {props.children}
        </StyledComponent>

    )

}


export default Component


const StyledComponent = styled.div`    
    ...styles go here
`

Answer 1

您只需要在创建 styled.div

时验证该道具

例子

const Menu= styled.div<{ menuOpen: boolean }>`
  ${({ menuOpen }) => {
    if (menuOpen) {
      return 'background-color: white';
    }

    return 'background-color: black';
  }}
`;

export const Component: React.FC = () => {
  const [menuOpen, setMenuOpen] = useState(false);

  return(
    <Menu menuOpen={menuOpen}>
      whatever content
    </Menu>
  )
}

Answer 2

问题是我试图将“as”道具传递给样式化的组件，我认为它需要是一个字符串，所以我这样做了......

type Props = {
    className?: string,
    as?: string
}

问题在于，一旦你将它传递给 styled-components，它就会期望它是一个元素的名称。我在 Github 上找到了答案，它可能是两种不同的东西之一。这行得通...

type Props = {
    className?: string,
    as?: React.ElementType | keyof JSX.IntrinsicElements
}

Answer 3

type Props = {
    additionalClass?: string,
    [key: string]: any
}