Как скомпоновать стили с помощью sass и css-модулей?

Я просто захожу в create-react-app v2, и мне интересно, как стилизация выполняется в проектах. Есть очень много способов сделать укладку. Например, если у вас есть .NavBar, который также использует повторно используемый .container и, возможно, другой класс, как вы скомпонуете их вместе? Вы используете :root и compose css-модулей или используете @extend или @mixins sass? Или, может быть, передать массив как className <div className = {['navbar', 'container']}>?

Как вы тоже импортируете? Можно ли импортировать один файл index.scss, содержащий все повторно используемые классы для каждого [name].module.scss?

Итак, каждый [name] .module.scss начинается так:

@import '../../styles/index.scss"

....
.navbar {
display: flex;
}
....

и index.scss имеет

@import 'layout'
@import 'colors'
@import 'typography'
...