Use Styled Components with the Object syntax

We will learn how to use the styled-components library using the object notation instead of template strings.

To use object notion, we will replace our backticks with a function and we can use props to change our elements.

We will go through a heading and transform it from template literals, backticks, to objects.

Kevin Barnoin

~ 4 years ago

Hello,

Nice lesson, helped me a lot, thanks :-) !!

Would it be possible to add how to deal with SVG, independently and within html, like within inputs with :after/:before css selectors ?

Or how would you manage such implementation ?

Thanks a lot, Kevin

Sara Vieirainstructor

~ 4 years ago

Hey!

About the before/:after you can see it here: https://codesandbox.io/s/vigorous-wing-h2746

Can you explain better what do you mean with the svgs? Do you want to put them as a background image?

Sara Vieirainstructor

~ 4 years ago

Also thank you so much :)

Kevin Barnoin

~ 4 years ago

Hello Sara,

Thanks for your feedback :-) I checked the code and found out later yesterday that I was missing the url() in front of the content property...

I'm interested in more content regarding styled components, especially around animation and global styles, best practices, if you know any.

Anyway, thanks a lot Sara.

Kevin

Le mar. 25 août 2020 à 02:02, Sara Vieira notifications@egghead.io a écrit :