Instructor: In this example, we have a menu button which, when clicked, toggles the appearance of a menu using a transition with CSSTransition from react-transition-group. This example uses vanilla CSS to achieve the transition.
Let's say instead we want to use styled-components to achieve the same thing. We will refactor our index.js and our index.css to use styled-components.
First, we'll create a new file called "components.js." We'll grab all our CSS. We'll place it inside components.js. Now let's import styled from styled-components. What we need to do is turn these CSS blocks into styled-components.
Here's an example with the toggler, which is a button. It becomes a Toggler component, which is a styled button. We pass it a template string. Let's apply the same principle to the rest of the CSS in this file.
Now we have a Container component that contains our variables, the Toggler component, which accounts for the active state using props instead of a modifier class name, which is what we had before, and the List and ListItem components.
In order to refactor our transition CSS, i.e., these four blocks, we need to make use of a separate package, styled-transition-group. Let's import that now.
We'll import transition from styled-transition-group. This is going to allow us to use styled-components alongside react-transition-group.
Now we can refactor our transition CSS. Now we have a Menu component with the styles as before. We're using a transition.div. The selectors here are slightly different to account for the library.
Our styled-components are set up now. Let's head over back to our index.js, where we'll need to do some refactoring to account for styled-components. We're no longer going to need the imports to CSSTransition, class names, or index.css.
Instead, we're going to import the styled-components that we just wrote. Down in our render, we're going to replace class names and elements with their corresponding styled-components names.
< div className="container"> becomes Container. Let's apply that to the rest of the render method now. Now let's save and refresh. Now our example is working with styled-components.