Styled Components Usage

[pkrawc]

Hey Joe,

Thought I would poke around your portfolio a bit and offer some advice, feel free to ignore.

You're importing the styled-components library but not making any use of it. I don't see a problem in just writing styles as css modules but styled components is a really powerful way to write css inside your components. I've been using styled components since it came out like 4 years ago and it has only gotten better over time.

Potentially a good learning experience would be to covert all your existing styles into component architecture, basically moving the css from separate files into the components themselves. Styled components are commonly written like a wrapper around the normal DOM node.

// CSS goes here. It's a template literal so every interpolation point
// has access to the props of the component.
const Header = styled.header`
  background-color: ${props => props.light ? "white" : "black"};
`

// Then the component can be used like any other
<Header light>
  I'm a header component
</Header>

[jodyanna]

Yo PJ! Thanks for taking the time to look over my code, and double thanks again for answering all my questions over the weekend. It was good to see you, man! I will definitely look into incorporating styled components into my projects. I have been curious about using them when I was looking up ways to implement a dark/light theme toggle switch and came across the library. Seems like a nice way to group CSS with each component. My portfolio site is a little bit of a mess right now, I'm using it as my first venture into React. Lots to learn!

…

On Mon, Oct 12, 2020 at 8:25 AM Patrick Krawczykowski < ***@***.***> wrote: Hey Joe, Thought I would poke around your portfolio a bit and offer some advice, feel free to ignore. You're importing the styled-components library but not making any use of it. I don't see a problem in just writing styles as css modules but styled components is a really powerful way to write css *inside* your components. I've been using styled components since it came out like 4 years ago and it has only gotten better over time. Potentially a good learning experience would be to covert all your existing styles into component architecture, basically moving the css from separate files into the components themselves. Styled components are commonly written like a wrapper around the normal DOM node. // CSS goes here. It's a template literal so every interpolation point// has access to the props of the component.const Header = styled.header` background-color: ${props => props.light ? "white" : "black"};` // Then the component can be used like any other <Header light> I'm a header component </Header> — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#1>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AOX2O27CR6I4GHVFQM7VO2LSKL7VPANCNFSM4SMZVVYA> .