Next.js + Chakra UIでグラフビューワアプリを作成中です。
グラフのプロットには、インタラクティブなplotly.jsを使用したいのですが、
Chakra UIと干渉して、plotly.jsのスタイルが添付のように崩れます。
Chakra UIのコンポーネントを使用するために、ChakraProviderを設定しているので、
CSSがresetされているために起こっている現状と推定しております。
試しに、ChakraProviderのresetCSSをfalseに設定すると、元に戻りました(ただ、今度はChakraのコンポーネントのスタイリングが崩れます)。
ChakraProviderの設定範囲をトップレベルではなく、下位レベルで限定して設定することも考えましたが、plotlyを使用する上位にChakraのコンポーネントであるContainerを使用するので、どうしてもChakraProviderの範囲内に入ってしまいます。
Containerの部分だけChakraで作成するのではなく、自作すれば良いのかなとは思うのですが、そうなるとChakra UI使っている意味が薄れそう、と思っています。とりあえず、解消するためにはこの方法でも良いかと思っているのですが、根本的にこの干渉の問題について解決したいと考えています。