All language subtitles for 008 Dynamic Styles with CSS Modules_en

[Maximilian Schwarzm�ller] So now that we use CSS modules,

let's also use the concept here

in the course input component.

We got the course input CSS file,

and as you learned, you need to change the name

to .module.css

With that, I mean the file name.

So CourseInput.module.css.

In the course input component, you then import

from CourseInput.module.

And as you learned, you import something from there.

Again, the name is totally up to you.

Typically you name it styles or classes

or anything like that.

We can remove the styled import from styled components

because I'm going to comment out this form control

like this.

I'm not going to use it anymore.

Instead down there, I'll go back to my good old div,

and on that div, I will add class name

to styles dot

form

control.

And now we have a problem.

This is an invalid property name,

but I named my class form control in here.

Well, it's not a problem.

We just have to use a different syntax

for accessing the property.

We use the square brackets and wrap this name

into single quotes.

This is how we can also access properties in JavaScript.

And with that, we can also access properties

with such a name,

because strings are valid keys in JavaScript objects.

Alternatively, of course, you pick different CSS class names

without dashes in them.

Here, however, I'll stick to that.

And there, for now, we got our styling back.

Now, of course the invalid style is not getting applied.

And the reason for that is simple.

For that invalid style to be applied,

we need to make sure that the invalid CSS class

is added on the element.

And currently that's never happening.

We're only adding foreign control, only adding this class

or the transfer in CSS modules version of that class,

to be precise.

We're never adding the transformed invalid class version.

It is something we can also do easily though.

We can go back to that backtick syntax

to create a string where we inject values.

And the first value I want to inject

is that resolved class name here.

So I inject this converted class name,

which we're in the end,

extracting from that styles object here into this string.

With that, if we save this, nothing should change.

And now, of course, just as before,

we can add an additional clause here.

We can check if not is valid,

and if that's the case, I add styles.invalid here

referring to that converted version of that invalid class.

Converted because that's what the CSS module process

will do behind the scenes.

And invalid because the CSS class name is invalid in here.

So with that, we're adding this converted version

of our own class, this scoped version of this CSS styling,

so to say,

to this div if isValid is false.

If we now save us and we go back,

if I click add goal, it's red.

If I type, it's no longer red,

it gets red again and so on.

So this now works again,

but now we're adding dynamic classes here with CSS modules.

It's not really that different from normal classes

because these are normal classes.

We just extract the converted class names

as they were generated by CSS modules, that's all.

And then we combine them as needed.

Last but not least, let's see how media queries

are set up in CSS modules.

And for that, let's go back to the button.

There I had a media query in my styled components,

so we can copy that and go to the CSS file

which we're using now.

And here you just add a media query as you would always

add it, maybe here at the bottom.

Let me get rid of these slashes.

The important difference to styled components, of course,

is that now you need your selector again.

You always need that in CSS.

The non selector syntax here in styled components

is really just a styled components feature

because it processes your CSS code.

This is not CSS code that would work like this in a browser

because CSS always needs a selector.

And that's why we need to add a selector here.

With that, however, we got everything we need.

We set the width here to 100% on small devices,

and then on bigger screens, we reset it to auto,

and that should be all that's needed.

No other changes are required because I'm working

on the same CSS class, which I'm already adding

to the component here.

So with that, you'll see, I have the big button there,

and on bigger screens, it's a smaller one.

So that all works and it also works with CSS modules.

Now, ultimately, it's absolutely up to you

which approach you prefer.

I showed you the CSS only,

the styled components, and the CSS modules approach

and then mentioned the different pros and cons.

And you can simply use the approach you like.

For the rest of this course,

I will use CSS modules because I liked that scoping.

and I like having my CSS code

and my JavaScript code separated.

But if you prefer a different approach,

that's, of course, also perfectly fine.