-
Notifications
You must be signed in to change notification settings - Fork 0
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Styled Components Usage #1
Comments
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>
.
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
The text was updated successfully, but these errors were encountered: