Как условно применить вложенные классы SCSS в ReactJS на основе логического свойства?

Question

У меня есть навигационный элемент боковой панели, к которому я пытаюсь применить стили SCSS в зависимости от положения элемента в React. Это то, что я сейчас использую для комбинации классов CSS, импортированных из модуля:

styles.main,
styles[position],
isOpen ? styles.opened : styles.closed,

Фрагмент из файла SCSS:

.right {
  top: 0;
  right: 0;

  .opened {
    visibility: visible;
  }

  .closed {
    visibility: hidden;
  }
}

Я пытаюсь понять, как правильно применять стили SCSS. Элементы наследуют класс .main и корневой селектор для .right (содержащий атрибуты top и right), но не для .right.opened и .right.closed.

Любая помощь или указатели относительно того, где я иду не так, были бы НАМНОГО оценены. Большое спасибо!

Answer 1

Вам не нужно наследовать стили, но составлять их. Вместо того, чтобы:

.right {
  top: 0;
  right: 0;

  .opened {
    visibility: visible;
  }

  .closed {
    visibility: hidden;
  }
}

Вы должны сделать:

.right {
  top: 0;
  right: 0;

  &__opened {
    visibility: visible;
  }

  &__closed {
    visibility: hidden;
  }
}

Затем вы будете применять классы, такие как isOpen ? styles.right__opened : styles.right__closed.

Вы можете проверить мое демо .

Answer 2

Используйте утилиту classnames , это рекомендуемый в настоящее время подход для обработки условных имен классов CSS в ReactJs.