All language subtitles for 004 Introducing Styled Components_en

Being able to set styles

and classes dynamically is super important.

And you now learned how you can achieve this in react code.

Now let's move to something else

and that would be the styling itself.

Currently we're using just CSS for that regular CSS files

with regular selectors, mostly class selectors

but also sometimes combined with tag selectors for example.

We're importing these files into our component files,

but as I emphasized multiple times,

this does not result in those styles

being scoped to this component only.

So that means that if we had any other element

anywhere else in a dorm

that had a form controlled CSS class on it,

this style for example, would target it and would affect it.

So it's not like we only care

about foreign control elements in this component, no,

every element on the entire page is affected

because by default, those styles are not scoped.

Now that is not necessarily a problem.

You can of course be careful about your selectors.

You can use class selectors or ID selectors here,

it is regular CSS after all, you can use any selector

and you can ensure that the IDs

and the classes you are selecting

are only used in the places

where you want to apply the styling.

But of course, especially in larger projects,

potentially with a lot of developers working on the code,

it could happen that a name is used twice.

That form control, for example,

is used in different parts of the application

and therefore unfortunately

styles spill over to our components

and you might want to avoid this.

And there are various ways of avoiding this

and I will show you

the two most popular approaches therefore.

Approach number one is to use a package

called styled components.

And you can just search for style components

to find their official webpage.

Now, on this page you can learn all about style components

here I will only introduce you to the package

if you wanna use it you can dive way deeper into it

with those docks

but I will give you a thorough introduction no worries.

Style components is a package that helps you build

guess what, components which have certain styles

attached to them

where the styles really only affect the components

to which they were attached and not any other components.

Now to get started,

we need to install that package.

And here you see the command you need to run for that.

Now, if you've never installed packages before,

keep in mind that our project here

already has a couple of packages on which it depends.

For example, react.

And we're just adding one more package here.

For that you should quit your development server

with Ctrl + C

and run npm_install--save styled-components

inside of this project folder.

Notice we'll download this package

and store it in a node modules folder,

and thereafter you'll be able to use it in this project.

So let's wait for this to finish.

Yep, here it is.

And with this finished

you can restart the server with NPM start.

So now how do we use this package?

Of course you can learn all about it on the official page

but I will simply introduce you to it step by step.

Now let's pick a place where we do wanna use it

and let's say we want to style our button.

We actually already have a button component

but we really only created this button component

if we're honest

because we wanted to have some default styling for a button.

Nothing wrong with this approach,

but here we could also use the stalled components package

to achieve this in a bit of an easier way.

Now, how would we do this?

We could rebuild our button here

by creating a new const Button

and now what we store in there is not a functional component

but instead we now import styled from 'styled-components.'

This import is now available

since you installed the package.

We can get rid of the button CSS import,

and instead now we use styled.button

and then we add two back ticks like this.

Now that certainly is a super weird syntax

and chances are, you haven't seen that before.

This is called attacked template, literal.

It's a default JavaScript feature,

it's not specific to this package, not specific to react

you could use it in any JavaScript project.

And now what does this do?

Well, button is simply a method on this styled object.

Styled is an object we're importing from style components

and there we can access the button method.

It's just a special kind of method you could say.

Instead of being a method,

which you call like this with parentheses,

you add these strange back ticks after it.

And again, that's just a default JavaScript syntax

which is supported by JavaScript.

In the end this will be executed

as a method behind the scenes

and what you pass in here

will be passed into this method just in a special way.

If you wanna learn more

about this tact template literal syntax,

you find a link attached where you can learn more.

Here, I don't wanna waste your time,

since we won't need to know the internals here to proceed.

For the moment we just need to know

that what we pass between these two back ticks

will kind of end up in that button method.

And this button method, and that's the interesting part,

will return a new button component.

Actually, that styled package

has methods for all HTML elements.

It has p method for a paragraph h1, h2 and so on

for the h1, h2 tags,

div to create a div and so on.

It's all there and here we need the button.

So this overall expression will return a button

but a button with the styles

we provide between these two back ticks.

The cool thing about the back tick Syntax is,

that you can write a multiline string like this,

so you can split this across multiple lines

without any extra Syntax.

And now we can just copy all the button styles here

and add them in here.

We'll need to tweak them, but that is something we can do.

Now, what do we need to do to make this work in the end?

This will return a button

and this button won't have a class of button

because we have no place

where we would set up this class name.

So instead, the styles will pass

between the opening and closing back tick

will directly effect this button.

You therefore get rid of any selectors like this

and instead just paste in your styles, just like that.

And they will be added to the button element

which is returned by this method call

which extends toward into this Button constant.

Now for a pseudo selectors, you can use the ampersand symbol

that's supported by that styled component package.

This tells the package that you wanna have a special case

special pseudo selector in this case here

for this component, which is created here.

So in this case, we're saying,

"Hey, when this button here has focus,

please apply to style."

We can do the same here for hover

and :hover and, :active.

And this should now give us a button which has these styles.

Now the button which is returned all to by default

applies all the props

you might be passing to your own button component

which we're exporting here in the end.

So we can still add on click prop, we can still set the type

that will all be forwarded by the style components package,

to that core built in button,

which we previously wrapped or used ourselves

which is now used internally by this button method.

We can now get rid of the react import up there

because we're not dealing with JSX in this file anymore.

And if we now save this, we should see that our application

looks and works exactly as it did before.

So this still works, but this is now our style button.

Now we can tell that there's something different

if we inspect it in the developer tools.

Of course it's a regular button,

that's what this button method here in the end returns.

But you see on that, there is a very strange class

two strange classes to be precise.

And these are class names we certainly didn't set up.

These are class names dynamically generated

by the styled components package.

Because what this package does in the end

is it looks at the styles we set up here

and then it wraps these styles into generated class names

where it guarantees that every class name is unique

so that it can spill over to other components of the app.

And it will then add these classes as global CSS.

But now since we have unique class names

for every styled component, the style set up here

will never be able to affect

the number of component in the app

because these unique class names

are really well unique per style component.

So that's how the styling is applied here

and that's how styled components work.

Now, of course we could also use stall components

when we want to set up something dynamic.