项目当前在升级，各个依赖的版本都逐步升到新版本，在升级
styled-components到 V6(6.0.2) 的过程中，遇到了几个问题，记录一下这里的踩坑之旅
直接根据官方文档的升级指南操作：What do I need to do to migrate to v6? 安装了 styled-components 和 stylis 新版本的依赖，然后运行项目，直接就是一整个大报错，开始踩坑
前置问题：yarn link
因为项目中有使用一个私有库，也使用了
styled-components，不确定一下就能升级成功，需要本地调试（不用每次修改都发新版本，然后宿主项目安装依赖），使用yarn link调试，具体操作可以查看这篇文章
坑1: @types/stylis
这里查询了好久，没有找到合适的解决方式，但是看源码大概定位到是 ts 类型问题导致的，然后在
styled-components 的 issue 中找到（链接），通过安装 @types/stylis 解决。
安装完成，项目启动成功，也没报错，哇塞好开心，居然一下就成了，然后一看页面，我去，好多样式乱套了......
坑2: Pseudoelements, pseudoselectors, and nesting
V6之前的版本，伪类/伪元素的前面，可以加 & 符号，也可以不加，但是V6之后，伪类/伪元素前必须加 & 符号，否则样式会不生效
const Test = styled.div`
// ...其他样式
:hover { // 不生效
color: red;
}
&:hover { // 生效
color: yellow;
}
`
补充：因为项目中有大量的伪类/伪元素的样式，一个一个的修改实在是太费时间了，一开始想找 stylelint 有没有内置的/其他插件可以校验伪类/伪元素的，找了一圈没找到，
styled-components官方给的校验方式也不行（链接）所以最后写了一个自定义插件来校验&定位当前没有添加 & 符号的伪元素/伪类的样式位置，链接在此
坑3: Passed props
自定义的 react 组件，在设置一些自定义的 props 的时候，需要加 $ 前缀
坑4: props 不能传递布尔类型的值
这个问题，一开始我觉得很奇怪，我之前 react 的 props 传参也有传过 boolean 类型的啊！这里为什么有警告，而且样式还没生效。
chatGPT给我的回答是这样的：
- 第一次尝试：我改成了
<MyComponent dropdown={condition && true} />这种写法，样式生效了，但是控制台的警告仍然存在； - 第二次尝试：我改成了
<MyComponent dropdown={condition ? 1 : 0} />这种写法，样式生效了，报错也消失了； - 终极解决方式：
<MyComponent $dropdown={condition} />,样式生效且控制台并未报错（完美～）； 参考这个issue。
其实我感觉这个问题和第三个坑本质上是一样的，不能直接把 true/false 加在 DOM 上，所以这里直接加 $ 前缀，当成一个自定义的 props 就好了
坑5: css 属性插值处理方式
解决完以上7个问题，样式看起来都正常了，我以为没有问题提交代码部署，然后发现打包失败了。
检查项目是因为，一个 polished 中的插件 ellipsis 报错了
了解了下这个插件中的这个方法，大概意思就是插入超出显示省略号的 css 代码到样式中。
知道了作用，但是不知道为什么报错，而且看起来报错的是类型问题，便以为是类型不兼容，查询了比较久的资料，无果。最后问 chatGPT 得出原因（其实还是对styled-components不熟悉），就是语法问题
改成如下代码就没有问题了～
至此，所有的样式问题和项目中的警告都解决啦～
