Удобный способ использования модулей CSS/SCSS в приложении React

Мне очень нравится система модулей CSS и простой способ их импорта и использования в приложении create-реагировать. Мне также нравится возможность вкладывать классы в SCSS следующим образом:

.unit {
   .text {
      font-size: 0.8rem;
   }
}

.text {
  color: red;
}

Но если я импортирую эти стили в свой компонент и использую их вот так...

import styles from './style.module.scss';

<div className = {styles.unit}>
  <div className = {styles.text}>small... and red!</div>
</div>

<div className = {styles.text}>red</div>

...styles.text, очевидно, будет одним и тем же классом, а текст в div "unit" будет красным, поэтому, если я не хочу этого наследования, я должен хранить классы с одинаковыми именами в отдельных файлах.

Мой вопрос: могу ли я использовать это как-то лучше? Например, Я был бы рад использовать его как:

<div className = {styles.unit.text}></div>

Но, может быть, мне не хватает лучшего встроенного решения или инструмента?