Bug: `<Button>` を使ったときに Button のスタイルよりも Clickable のスタイルが優先されてしまう

[fsubal]

できる限り詳細に、不具合の内容と再現方法を報告してください

Next.js で charcoal-ui/react の <Button> コンポーネントを利用しているページで奇妙な挙動が起きる。

別のページから SPA 遷移してきたときには Button が正しい見た目で表示されるが、ページをリロードするとスタイルが当たらなくなってしまう。

インスペクタで見ると Button の color や background-color が clickableCss に上書きされて inherit になってしまっていることがわかる。スタイルの優先順位が不定になっていそう？

https://github.com/pixiv/charcoal/blob/d2e8ec97fd936ddbecc29f5f84b78c2265b3647c/packages/react/src/components/Clickable/index.tsx#L92

---

これに関連していそう。

styled-componentsの仕組みについての覚え書き | Wantedly Engineer Blog

使用している charcoal および周辺環境

styled-components 5.3.0+ の環境で @charcoal-ui/react を使うと起きる （ 5.3.0 に下げると直る ）

コード例へのリンク

No response

現在の挙動

Button の color や background-color が不定になる

期待される挙動

Button の color や background-color が優先されて表示される

[toshusai]

再現する環境が欲しいです