如何基于布尔prop在ReactJS中有条件地应用嵌套的SCSS类？

Question

I have a sidebar navigational element that I'm attempting to apply SCSS styles to based on the position of the element, in React. This is what I currently have for the combination of CSS classes imported from a module:

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

The snippet from the SCSS file:

.right {
  top: 0;
  right: 0;

  .opened {
    visibility: visible;
  }

  .closed {
    visibility: hidden;
  }
}

I'm trying to figure out how to have the SCSS styles be applied correctly. The elements are inheriting the .main class and the root selector for .right (containing the top and right attributes), but not the ones for .right.opened and .right.closed .

Any help or pointers as to where I'm going wrong would be MUCH appreciated. Thank you very much!

Answer 1

You don't have to inherit the styles, but compose them. Instead of having:

.right {
  top: 0;
  right: 0;

  .opened {
    visibility: visible;
  }

  .closed {
    visibility: hidden;
  }
}

you have to do:

.right {
  top: 0;
  right: 0;

  &__opened {
    visibility: visible;
  }

  &__closed {
    visibility: hidden;
  }
}

Then, you will apply classes like isOpen ? styles.right__opened : styles.right__closed isOpen ? styles.right__opened : styles.right__closed .

You can check my demo .

Answer 2

使用classnames实用程序，它是当前推荐的在ReactJs中处理条件CSS类名的方法。