React Styled-Components

This tutorial explains the fundamentals of how to use styled-components with React to create reusable components for your web apps.

[ИхсанБрахомов-юо]

Hey professor Steve, i want to say a big thanks to you for all the work you're doing. You are the main reason why i managed to learn to code and to land my first job as a junior full stack developer. You are the most positive and nice person i have ever listened to on YouTube. I wish you all the happiness and health in the world you deserve it professor!
Greetings from Bulgaria!
Ihsan

[benjarris]

Great video, really easy to follow, thanks for posting.

[mahneh]

Great. I am not sure though that this is easier than importing css file and passing a className, do you think so?

[nro]

This is a really important topic, thanks for covering it!

[devfordesigners]

How would you handle props with more variants than the ternary operator supports?

For example if I had a primary, secondary, tertiary, disabled, warning, and success variant I wanted to pass in as a type prop the the button component.

How would I define more than two options?

[Krzysiekoy]

Using tagged template literals to style things is so mind blowing when you've never worked with tagged template literals before. I've seen styled components here and there and I could never cross that mental barrier of accepting that styled.h1`just some strings` will apply styles.

Now that I've researched the topic, I kinda get how you can put a function name in front of a template literal and the strings and expressions will get passed to the function, but I still feel kind of uncomfortable with the "magic", since you have to kinda trust how things work "under the hood" for these components.

By the way, do you just get proper syntax highlighting for the css props inside those string literals out of the box? This looks nice in the video, but on their website, the interactive examples don't have any code highlighting, just plain strings