Как прописать стили дочернего элемента при определенном состоянии родительского в sass?

Question

[nastinapetrova555]

Есть вложенность. У родителя item-wrapper может быть состояние selected/disabled, которое хранится в переменной status. Стили самого внутреннего элемента Item__inner-wrapper меняются в зависимости от состояния самого верхнего родителя. У Item тоже есть свои стили. Как в данном случае прописывать стили для Item__inner-wrapper при disabled у Item-wrapper?

<div className={"Item-wrapper " + status} >
                <div className="Item" >
                    <div class="Item__inner-wrapper" /> 
                </div>
</div>

В css это было бы так:

.Item-wrapper.disabled .Item__inner-wrapper {
   ...
}

Answer 1

[vinsssten]

Можете добавить класс item-wrapper, а item-wrapper--disabled отдельно от него, и добавлять его при надобности, тогда вся конструкция будет выглядеть так

.item-wrapper {

  .item {
    &__inner-wrapper {
      color: red;
    }
  }

  &.item-wrapper--disabled {

    .item {
      &__inner-wrapper {
        color: blue;
      }
    }
  }
}