使用样式化组件时没有重载匹配此调用

Question

在 SO 上有几个关于此错误的问题，但没有来自类似情况的任何人，而且我找到的解决方案都没有工作，所以我将发布一个特定问题。

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

这是我的代码。似乎是as=""属性给出了上面的错误。我认为这与我的组件只接受 prop 这样它就可以将它传递给 Styled Component 的事实有关，因为它是 Styled Components 的一个 feator。

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

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

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

问题是，一旦你将它传递给 styled-components，它就会期望它是一个元素的名称。我在 Github 上找到了答案，它可能是两个不同的事情之一。这有效...

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

Answer 2

您只需要在创建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>
  )
}