TypeScript 中向 styled-component 传递自定义 props 报错如何解决？

• TypeScript 类型校验不通过：在TypeScript环境中使用styled-components时，给样式组件传递自定义的open属性前，没有提前声明该属性的类型，TS会将样式组件默认等同于原生div元素，认为你传入了原生div不存在的open属性，因此触发类型报错。
• 样式文件缺少必要引入：你贴出的HeaderStyled组件代码中，没有引入styled对象和你用到的theme全局变量，也会引发运行时报错。

1. 补全Header_styled文件的依赖引入，同时给自定义样式组件声明接收的props类型，代码修改如下：

// 引入styled-components
import styled from 'styled-components';
// 引入你项目里的theme配置文件，路径根据你的项目结构调整
import theme from '你的theme文件路径';

// 声明样式组件接收的props类型
interface IHeaderStyledProps {
  open: boolean;
}

// 给styled.div绑定泛型类型
const HeaderStyled = styled.div<IHeaderStyledProps>`
    background-color: ${theme.primaryBlue};
    display: flex;
    justify-content: flex-end;
    padding: 20px 20px;
    align-items: center;

    ul {
            position: absolute;
            background-color: white;
            top: 6%;
            width: 80%;
            height: 25%;
            right: 10%;
            display: flex; 
            flex-direction: column;
            padding: 0px;
            align-items: center;
            justify-content: space-around;
            transform: ${({open}) => open ? 'translateX(0)': 'translateX(120%)'};
            li {
                padding: 0px;
                
                a {
                    color: #0000002e;
                }
            }
            
            button {
                background-color: yellow;
                color: black;
            }
        }
`

export default HeaderStyled;

2. 可选优化：为了避免自定义的open属性被透传给底层的原生div节点，建议按照styled-components的规范给自定义props加$前缀，声明为transient属性，修改后对应代码如下：
   Header_styled文件：

interface IHeaderStyledProps {
  $open: boolean;
}

const HeaderStyled = styled.div<IHeaderStyledProps>`
  /* 其他样式不变 */
  ul {
    transform: ${({$open}) => $open ? 'translateX(0)': 'translateX(120%)'};
  }
`

Header组件对应修改传参：

<HeaderStyled $open={open}>
  {/* 内部内容不变 */}
</HeaderStyled>

修改完成后即可解决报错，动态样式也能正常生效。

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