react 複数コンポーネント間で共通のcssの利用

Question

import theme from './test1.css';
class test1 extends React.Component{
  render() {
    return (
      <div className={theme.txt}>abc</div>
    )
  }
}

import theme from './test2.css';
class test2 extends React.Component{
  render() {
    return (
      <div className={theme.txt2}>def</div>
    )
  }
}

test1.css

.txt { font-size:12px; }

test2.css

.txt2 { font-size:15px; }

上記のように複数のコンポーネントファイルがあり、
それぞれにcssがぶら下がっているとして、
上記ふたつに共通のcssを当てたい場合どうするのがベターでしょうか？

common.css

div { backgruond:#ddd; }

いつもは、それぞれのcssファイルに
@import "common.css";
としているのですが、あってますでしょうか？
それともコンポーネントの方に

import common from './common.css';
と読み込んだ方がいいのでしょうか？

Answer 1

例がシンプルで前提条件が分からないので、可能不可能は置いておいて回答します。

1. 共通コンポーネントを利用する

利用するCSSが同じ＝役割が同じ＝コンポーネント化出来るって考えです。
同じCSSをあてる部分を共通コンポーネント（HOCでも可）にしてしまえばいいのではと思います。
仮に役割が異なるコンポーネントの場合であれば、同じようなデザインを当て込むとしても共通のCSSは利用しないほうがいいかと。

2. StyledComponentsの継承を利用する

利用できるなら、StyledComponentsの継承を利用するのが簡単です。

3. CSS importを利用する

上記2つが無理なら、質問者様がおっしゃっているCSS importを使うのが現実的かと思います。

Comments

[cheche0830]

ありがとうございます。1のように考えたかを変えたほうが良い気がしました。コンポーネントをまたぐ指定は極力避けるようにしたいと思います。ありがとうございました。