Вложенность стилей в 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. Мне просто не очень нравится использовать миксины, и я ищу другой подход. Такой подход, который бы работал в приведённом выше примере, с БЭМ.


Ответы (0 шт):