それぞれのクラス名の規則が曖昧だったのでこの際整理してみました。

BEM

お馴染みのBlock__element--modifierです。
ReactならBlock=コンポーネントの単位ですかね？

CSS Modules

CSSが書いてあるファイル名_クラス名__Hashになります。

.primary{/* ... */}

importstyledfrom'./Button.module.css'exportconstButton=props=>{return<buttonclassName={styles.primary}{...props}/>}

Styled components (Babelプラグイン前提)

上2つと比べて暗黙的な処理があります。

CSSが書いてあるファイル名とコンポーネント名が同じ場合、
CSSが書いてあるファイル名(コンポーネント名)-Hashになります。

exportconstButton=styled.button` /* ... */ `

CSSが書いてあるファイル名とコンポーネント名が違う場合は、
CSSが書いてあるファイル名__コンポーネント名-Hashになります。

exportconstBtn=styled.button` /* ... */ `

おわりに

BEMとCSS ModulesとStyled-components、ブロックスコープと名前空間という点では似た設計思想ですが
細かい実装となると1対1で対応してはいないのでそれぞれ見極めて使いたいですね。