Convert to Styled Components

[karismatic-megafauna]

https://www.styled-components.com/docs/basics

Currently the code is structured very similarly to this so it should be an easy refactor!

[robbawebba]

I would love to help with this one!

[karismatic-megafauna]

Awesome! Let me know if I can help at all :)

Just to be more explicit, this is kind of the shape the code is taking already:

<div className="Content">
  // children
</div>

And here is how it would be with styled components:

const Content = styled.div`
  key: value;
  key: value;
`;

<Content>
  // children
</Content>

I am wondering if now would be the right time to make these their own contained components, so the style definition for Content would be in a whole separate file called Content.js and you would import that into App.js.

My intuition tells me it is too early but if it feels like the right thing to do while you are doing this, feel free to make that jump!

Feel free to reach out if you would like to pair or anything :)

michaelghinrichs@gmail.com

[robbawebba]

Sounds good! I began working on this last night and already created a separate file called styledComponents.js that will contain all of the component definitions and export them. So all we have to do in app.js is to import them! This will help keep the app.js file clean.

Also, I was having trouble creating a styled component for the buttons inside the app. The buttons use so many css classes and subclasses that made it difficult to switch to a styled component. Do you have an idea as to how we can solve this problem? Thanks for your help!