https://styled-components.com/docs/faqs#how-can-i-override-styles-with-higher-specificity
这里是正解，确实是通过生成多个重复的 class 来影响优先级，感觉这玩意儿有没有用完全看浏览器的渲染实现啊，不过貌似应该是都有效，不然文档也不会这么写。

How can I override styles with higher specificity?

The way to override styles with a high specificity is to simply increase the specificity of your own styles. This could be done using !important, but that's error prone and generally not a good idea.

We recommend the following technique:


const MyStyledComponent = styled(AlreadyStyledComponent)`
&&& {
color: palevioletred;
font-weight: bold;
}
`
Each & gets replaced with the generated class, so the injected CSS then looks like this:


.MyStyledComponent-asdf123.MyStyledComponent-asdf123.MyStyledComponent-asdf123 {
color: palevioletred;
font-weight: bold;
}
The repeated class bumps the specificity high enough to override the source order without being very tedious to write!