Typescript ライブラリのcssが反映されない(chat-ui-kit-react)

Question

【バージョン】
React v17.0.0
Typescript v4.6.2

【概要】
React × Typescriptでチャットを作成しております。
その時にチャットのUIを作成できるライブラリchat-ui-kit-reactをインストールしました。
https://chatscope.io/storybook/react/?path=/docs/documentation-introduction--page
chat-ui-kit-reactではJSとCSSのファイルを使用するのですが型定義のファイルが提供されていなかったので以下の記事を参考にそれぞれ型定義ファイル(.d.ts)を作成しました。
JS：https://www.typescriptlang.org/ja/docs/handbook/declaration-files/dts-from-js.html
CSS：https://github.com/Quramy/typed-css-modules

【困っている事】
chat-ui-kit-reactにならいベースのUIを作成したのですがCSSが効いておりませんでした。
青色の波線はCodeSpellCheckerに引っかかっているだけです。
・該当のソースコード

・本来表示される画面

・実際の画面

デベロッパーツールで確認するとやはりCSSが効いておりませんでした

ただ特にエラーはどこにも出力されていないのでどこが原因か分かりかねております。
何かご存知の方がいらっしゃればご教示頂けると大変助かります。
よろしくお願いします。

Answer 1

現在(2024/11/20時点)、chat-ui-kit-reactは型定義ファイル(.d.ts)が提供されているようです。

また、スタイリングについては、CSS Modulesではなく、素のcssファイルを参照しているようです。以下のように変更したところ、スタイリングは有効となりました。

import "@chatscope/chat-ui-kit-styles/dist/default/styles.min.css";

Answer 2

型定義のファイルをご自分で作成なされたのでしょうか
原因かはわかりませんが
yarn add @types/@chatscope/chat-ui-kit-react
または
npm install @types/@chatscope/chat-ui-kit-react
で型定義ファイルをダウンロードし直してみてはどうでしょうか？

Comments

[hiroki88]

ご回答ありがとうございます。
自分で作成する前にご回答頂いたように型定義をダウンロードしようと思ったのですがこちらのライブラリは存在せず...。
仕方なく作成致しました。

[senryTY]

なるほど
自分のほうでも試してみましたが上記で問題なくダウンロードでき目的の画面が表示されました。
そのあたりに問題があるかもしれません。現状ここまでの回答になってしまいます。
お力になれず申し訳ありません

[hiroki88]

そうなんですね、わざわざ確認して頂きましてありがとうございます。
自分も型定義の箇所に原因があると思うのでそこを確認したいと思います、