styled-components样式组件自定义属性TypeScript类型报错如何解决

• 第一个报错Property 'navbarOpen' does not exist：你向S.Toggle组件传递了navbarOpen自定义属性，但定义S.Toggle的styled组件时未声明该属性的TS类型，TS无法识别未定义的自定义props。
• 第二个报错Property 'open' is missing：你定义NavBox时声明了必填的布尔类型属性open，但在navbarOpen为true的渲染分支中，调用S.NavBox时未传入open属性，触发必填属性缺失校验。

1. 修复NavBox属性缺失问题
   你原有代码对NavBox的调用写了冗余的三元分支，结合你定义的样式逻辑（open为true时导航隐藏，false时导航显示），可直接简化为统一传入open属性，无需分支判断：

// 删掉原来的三元判断，替换为下面这行
<S.NavBox open={!navbarOpen}>
  <NavBar />
</S.NavBox>

如果要保留原有分支写法，只需要给第一个分支的S.NavBox补充open属性即可：

{navbarOpen ? (
  <S.NavBox open={false}>
    <NavBar />
  </S.NavBox>
) : (
  <S.NavBox open={true}>
    <NavBar />
  </S.NavBox>
)}

2. 修复Toggle属性不识别问题
   两种方案二选一：

• 如果S.Toggle组件本身需要根据navbarOpen调整样式，给styled定义补充类型声明即可：

// 假设Toggle是基于div创建的，补充对应的props类型定义
export const Toggle = styled.div<{ navbarOpen: boolean }>`
  // 原有样式逻辑
`

• 如果S.Toggle不需要用到navbarOpen属性，直接删掉S.Toggle上的navbarOpen={navbarOpen}属性即可，你的现有代码中Toggle内部并没有用到该属性，删除后不会影响功能。

内容的提问来源于stack exchange，提问作者Laura