ライブラリが提供するコンポーネントのcssを、できるだけ無駄が無い書き方かつファイルの読み込み方で上書きしたい。

Question

前提・実現したいこと

Next.jsを使っています。
ライブラリが提供するコンポーネントのcssを、できるだけ無駄が無いように書きかつcssファイルを読み込みたいです。
また、ライブラリが提供するコンポーネントは複数のhtml要素で構成され、それぞれにクラス名が割り当てられているため、クラス名を指定してcssを上書きしたいです。

問題点

cssファイルの読み込みの無駄を省くため、グローバルなコンポーネントでグローバルなcssを読まず、ひとまずcss modulesでcssの上書きを試みました。

しかし、css modulesだと子html要素のクラス名を指定してもcssが効きませんでした。

該当のソースコード

// Hoge.jsx
import Library from "library";
import "library/css";
import {styles} from "styles/hoge.module.scss";

const Hoge = () => {
  return (
    <div className={styles.wrap}>
      <Library />　{/* LibraryコンポーネントはclassName属性を受け付けない */}　
    </div>
  )
}

// hoge.module.scss
.wrap {
  // この階層に書くcssは効きます。
  .library { // この階層ならびにこの階層以下のCSSが効きません。
    .input {
      padding: 1rem;
    }
    .leftBtn {
      padding: 1rem;
    }
  } 
}

---

デベロッパーツールで確認できる、Libraryコンポーネントのhtml構造

<div class="library">
  <input class="input" type="text" />
  <button class="leftBtn">Left</button>
  <button class="rightBtn">Right</button>
  ...省略
</div>

試したこと

• css modulesではなくhoge.cssとしてインポートすればスタイルを設定できそうですが、Next.jsでは_app.tsxでしかファイルのインポートは許されていません。
• _app.tsxでhoge.cssとしてインポートしたところLibraryコンポーネントにcssを適用できました。

ただし、LibraryコンポーネントはHogeコンポーネントでしか使わないため、他ページでhoge.cssを読むのは無駄になります。

• css modulesで下記のようにクラス名ではなくhtml要素を指定すればスタイルを適用できそうですが、手間が掛かるのと可読性を損なうので、この手法は避けたいです。

// hoge.module.scss
.wrap {
  > div {
    > input {
      padding: 1rem;
    }
    > input:nth-of-type(1) {
      padding: 1rem;
    }
  } 
}

---

css modulesのファイルで子html要素にクラス名を指定してする書き方や、next.jsの設定や書き方で_app.tsx以外のコンポーネントでcssファイルをインポートできる方法を調べましたが、見つけられませんでした。

Answer 1

:globalを使うことでグローバルなクラス名を指定することができるようになります。
こんな感じになると思います〜

// hoge.module.scss
.wrap {
  :global {
    // この階層に書くcssは効きます。
    .library { // この階層ならびにこの階層以下のCSSが効きません。
      .input {
        padding: 1rem;
      }
      .leftBtn {
        padding: 1rem;
      }
    } 
  }
}