reactでセレクタを指定できるか知りたい

Question

前提・実現したいこと

現在Reactの勉強をしています。

前回の投稿で気になったことなのですが、
https://teratail.com/questions/344767

Reactでセレクタを指定してインラインでCSSを適用することはできるでしょうか？

具体的には
以下のようにreact-iconsの色を変えるためにcssファイルにpath strokeへスタイルを当てています。

import { GrDownload } from "react-icons/gr";
import './icon.css';


function App() {
  return (
    <div className="App">
      <GrDownload className="ico-GrDownload" />
    </div>
  );
}

/* icon.css */
.ico-GrDownload path {
    stroke: #f00; /* 赤に変更 */
}

これをjsファイル内にインラインで書けるでしょうか？
わかる方いらっしゃいましたらお願い致します。

今のところ方法は見つかっていないので、もし難しそうであれば諦めます

試したこと

ググる
Reactのコンポーネントのスタイリングをどうやるか

Comments

[maisumakun]

（誤解したので削除）

Answer 1

以下のようなやり方でできたような気がします

const grDownloadStyles={
  path:{
    stroke: '#f00'
  }
}

// 省略

<GrDownload className="ico-GrDownload" css={grDownloadStyles}/>

Answer 2

動的に<style>を生成すれば、いちおう可能です。

Comments

[maisumakun]

とはいえ、「<style>要素の管理」「セレクタの衝突を避けるための管理」などを考えると、実用的なところへ持っていくまでに手間は相当にかかることが予想されます。

.cssをimportする方法と比較して、（同じファイルに書けるというただ1点を除けば）デメリットしかないと考えます。

[k49977]

回答頂きありがとうございます
cssインポートのほうが良さそうですね！