同一のクラス名が複数あるcssをReactで制御するには？

Question

お世話になります。
React.jsを学習中なのですが、表題のように同一のクラス名が複数あるcssをjsxで制御するにはどのようにしたらよいでしょうか。
そもそも被らないようにするのが前提かと思いますが、かぶった場合において制御する方法を知りたいです。

例：

common.css

.all {
　　共通;
}

.test-contents {
　　中身1;
}

common2.css

.test-contents {
　　中身2;
}

上記の2ファイルがあり、どちらも中に．test-contentsクラスがあるとします。
.allクラスは全体で使用したいので共通としてindex.jsで読み込みます。

import './css/common.css';

TESTコンポーネントでcommon2.cssの.contentsを使用したいとします。

import './css/common2.css';

class TESTComponent extends React.Component {
  render() {
    return (
          <div className="test-contents"></div>
   );
  }
}

このようにすると当然contentsはindex.jsとTESTComponentのtest-contentsが読み込まれるのでmultipleとなり、common.cssとcommon2.cssが読み込まれ、レイアウトが崩れてしまう結果となってしまいます。
TESTComponentで

import COMMON2 from '../css/common2.css';

class TESTComponent extends React.Component {
  render() {
    return (
          <div className={COMMON2.test-contents}></div>
          <div className={COMMON2.testContents}></div>
          <div className={COMMON2['test-contents']}></div>
   );
  }
}

などのように試行錯誤してみたのですが、どれもうまくいきませんでした。
console.log(COMMON2);をしてみると結果は {} なのでそもそもCOMMON2を読み込むことができていないようです。

そもそも設計的によろしくないとは思うですが、上記のように使用する場合にはどのようにして行えばよいかご教示いただけませんか？
よろしくお願いいたします。

Answer 1

CSS Modulesとしての変換（指定したCSSのクラスを変換する）には、いくつかのローダーとその設定を組み合わせる必要があります。ここなどが参考になるかもしれません。

Comments

[ppphysiccc]

ありがとうございます！
このCSS Modulesを行った後、上記対応
import COMMON2 from '../css/common2.css';
を行わなければならないということですかね。。
まだまだ理解が浅いですが、一度試してみたいと思います。