javascript - 我的样式属性的输入有误

Question

在我的组件中，我收到了样式的道具，如下所示：

export const NavBox = styled.div<{ open: boolean }>`
  display: flex;
  height: 100%;
  justify-content: flex-end;
  align-items: center;
  @media (max-width: 768px) {
    flex-direction: column;
    position: fixed;
    width: 100%;
    justify-content: flex-start;
    background-color: var(--color);
    transition: all 0.3s ease-in;
    top: 10.3vh;
    padding-top: 10vh;
    left: ${(props) => (props.open ? '-100%' : '0')};
  }
`

在 Header 中，我收到有关类型的此错误：

'IntrinsicAttributes & Omit<Omit<Pick<DetailedHTMLProps<HTMLAttributes, HTMLDivElement>, "key" 类型不存在属性 'navbarOpen' HTMLAttributes<...>> & { ...; },

'{ children: Element; 类型中缺少属性 'open' }' 但在 'Omit<Omit<Pick<DetailedHTMLProps<HTMLAttributes, HTMLDivElement>, "key" | 类型中是必需的 关键的 HTMLAttributes> & { ...; } & { ...; }，从不> & 部分<...>，“主题”>'。

这是代码：

const Header = () => {
  const [navbarOpen, setNavbarOpen] = React.useState<boolean>(false)
  return (
    <S.HeaderWrapper>
      <S.NavWrapper>
        <S.Toggle
          navbarOpen={navbarOpen}
          onClick={() => setNavbarOpen(!navbarOpen)}
        >
          {navbarOpen ? <S.Hamburger open /> : <S.Hamburger />}
        </S.Toggle>
        {navbarOpen ? (
          <S.NavBox>
            <NavBar />
          </S.NavBox>
        ) : (
          <S.NavBox open>
            <NavBar />
          </S.NavBox>
        )}
      </S.NavWrapper>
    </S.HeaderWrapper>
  )
}

任何人都可以帮我解决这个问题吗？谢谢你的帮助！

标签： javascriptreactjstypescriptstyled-components