CSS モジュールのせい（おかげ）で、名前が変わって Style 適用に困ったときは global css で対処した

背景

チャットボット作成時に、react の画面分割をしたくなった。
最初は自分で width を変数で制御しようとしたが、「こんな面倒なこと今どきやらないだろう」と思い直し、見つけたのが、react-split
使ってみると、簡単に画面分割は上手くいった

しかしながら、Style 適用で躓いたのでその記録

Front Engineer さんから怒られるかもな対処法ですが・・

結論

• css Module で一意の名称にならないように、global css にして定義した。

split 側の命名規則は以下にあり

gutter への sytle

:global(.gutter.gutter-horizontal) {
    background-color: azure;
    cursor: col-resize;
    width: 5px;
}

:global(.gutter.gutter-horizontal:hover) {
    width: 10px;
}

詳細

• gutter を見やすいようにしておきたかったので、reference を頼りに設定したものの、まったく反映されない。
  • F12 で調べてみると、分かったことは２つ
    • なにも適用されていない
    • 設定した css の名称に、なんか変なものがついている

gutter すら何のことやらだった素人さんだったので、GPT さんに聞いたところ、class name が被らないようにしてくれる css module さんのお仕事だったという事が分かる。
で、回避方法として提案してくれたのが、

• html に直接 css 読み込み

ただ、その際の global css というキーワードに引っかかって確認してみたところ、:global() で指定することが出来ることを知る。

で、試してみたところ、結論にあるようにしたところ、class 名置換がされず、無事適用されるにいたった。

あとがき

Azure 触ってたはずなのに、何故か Python / Typescript でこんなことやってたり。
とはいえ、昔は好きではなかった javascript がめっちゃ楽しく感じるので、ちょっと幸せだったり