ReactのCSS構造・依存関係について　各コンポーネントのスタイルは完全に独立しているべきなのでしょうか

知りたいこと

現在ReactでWebアプリケーションの開発をしています。
Reactで何かを作るのは初めてで、チュートリアルや入門書(りあクト)を読みながら開発しています。
現在CSSでスタイルを整える段階なのですが、CSSの構造について悩んでいます。
Reactでは各コンポーネントは依存関係を持たず、再利用可能であるべきとされていますが、
そうであればCSSも完全に独立させるべきなのでしょうか。

例えば、フォントや行間を設定するCSSがあったとします。
一般的な静的ウェブサイトであれば各コンテンツの一番外側に配置されるWrapperタグに対して

css
1.wrapper {
2  color: black;
3  font-weight: 400;
4  line-height: 1.5;
5}

のように指定し、その配下の内容について一括で設定するかと思います。
Reactでも同様に親コンポーネントに上記CSSを設定することで、
配下のコンポーネントに一括で適用可能です。

しかし、それだと各コンポーネントは親に依存してしまいます。
各コンポーネントを独立させるためには全てのコンポーネントのソースに

css
1{
2  color: black;
3  font-weight: 400;
4  line-height: 1.5;
5}

上記を記述すべきなのでしょうか。

この件について自分で調べても参考となる記事等を見つけることができなかったので、
アドバイス、もしくはご意見いただけると大変ありがたいです。
宜しくお願い致します。

hoshi-takanori

2021/02/01 21:47 編集

自分もそんなに詳しくありませんが、たぶん作るものによると思います。例えば、再利用可能な単体のコンポーネントを作るなら、それがどこに置かれてもいいように作るでしょうし、material-ui のようなコンポーネントのセットを作るならある程度セットで使われることを前提としてもいいでしょう。アプリの場合は CSS は自分の制御下に置くことになるので、やりやすいように作ればいいのでは。