Instructor: In this example, we have a menu button which toggles the appearance of a menu when clicked. The menu is transitioned in and out of the DOM using CSS transition from React Transition Group. This example is using vanilla-css. Let's say we need to use JSS instead.
Let's head towards the bottom of our app where we'll need to slightly change our export to account for using inject sheet with our styles. We're going to make a styled app which uses inject sheet to join styles and app. That's what's going to get exported.
Now, we need to turn our class name references into JSS friendly references. Using inject sheet gives us a classes prop. I'm going to use this to refer to the styles in styles.js. After refactoring all of our class name references to link to our styles.js, we can now see that we have the same styles. However, there's no transition added yet.
This is because we need to change how this CSS transition component is set up. What we need to do is change this class names prop.
If we're using standard CSS, it is fine to pause a string is this prop. The React Transition Group class names such as enter and enter-active will always stem from this string. However, in JSS, it's a bit different, because our class names need to refer to classes.
This class names prop in CSS transition is ideal for using with JSS, because we can also pass an object as the prop. Instead of passing a string of Boolean, we're going to pass an object with enter, enter-active, exit, and exit-active keys. I'm going to refer to JSS class names.
The difference here is that we need to be explicit about the class names that we need. This class names prop can either be a string or an object. The reason is class names as supposed to class name is that we can supply multiply class names.
If you only pass a string, it will generate multiple class names. If we look in our styles.js, we can see that we have this transition selector set up. Now, let's save and refresh. There's our transition working with JSS.