cssを特定の条件で適用する方法

Question

実現したいこと

reactで、特定のコンポーネントを表示してる時だけ、背景色を変更したいです。
html要素に適用したいのですが、他のコンポーネントを表示してるときは適用しません。
どのしたらいいですか？

該当のソースコード

html {
  background-color: #CCCCCC
}

import React from “react”;
 export const TestTop = () => {
 return (
      <div>
　　　　この画面に適用
      </div>
  )
}
export default TestTop

調べたこと

cssファイルを作成し、以下のようにインポートする方法がやりやすそうだと思いました。
しかし、この方法はdivなどにclassNameを付与して適用するやり方ばかりでした。
今回のコンポーネントは子コンポーネントであることと、htmlに適用したいときってどうやればいいのか調べても出てきません。

test {
  background-color: #CCCCCC
}

import React from “react”;
import styles from './style.scss';

 export const TestTop = () => {
 return (
      <div className={styles.test}>
　　　　この画面に適用
      </div>
  )
}
export default TestTop

Comments

[maisumakun]

試してみたこと、調べたことなどがありましたら明記をお願いします。

[gomes_2222]

調べたことを追記しました

Answer 1

こちら、方法がわからなかったので、別の方法で対応しました。

あらかじめページを二つ用意しておいて、バックエンドのプログラムのif文で条件に応じて表示内容を変更。
という形で仕様変更して対応しました。