Вложенность стилей в React + SCSS
Столкнулся с задачей, как заставить React CSS Modules понимать вложенность, которая есть в SCSS. Вот для примера стиль с вложенностью и БЭМ:
.cell {
width: 10%;
height: 10%;
position: absolute;
&__empty {
box-shadow: inset 0 0 2px 1px rgba(0, 0, 0, 0.15);
}
}
В компонент он подключается с помощью CSS Module:
import React from 'react';
import style from './Cell.module.scss'
const Cell = () => {
console.log(style)
return (
<div className={style.cell}>
</div>
)
}
export default Cell;
Если посмотреть в консоли, что такое style, то это будет объект с двумя стилями: cell и cell__empty.
cell: "Cell_cell__DulVR"
cell__empty: "Cell_cell__empty__1BKB3"
Проблема в том, что Cell__empty не наследует Cell. Может, возможно указать сразу два стиля в className? Если можно, то как?
Я пытался решить проблему с помощью mixin, и это вроде работает. Но миксины просто рубят на корню все преимущества вложенности scss. Мне просто не очень нравится использовать миксины, и я ищу другой подход. Такой подход, который бы работал в приведённом выше примере, с БЭМ.