So in the last lesson, we looked at how we can apply CSS styling through the use of our style sheet. 1
Now in this lesson I want to show you a slightly less used but also quite a useful way of adding styling 2
and that's through the use of inline styles. 3
Now here's the starting Project. 4
So go ahead and fork it. And once you've done that let's start adding some inline styles. 5
So if this was in fact HTML, you know already that you can add styling inline just through the use 6
of the style attribute. 7
So I could say something like color is red. 8
Now unfortunately though, this is not HTML and this is something that I keep reiterating because it 9
looks so similar to HTML and it's doing so much behind the scenes for you converting this into Javascript 10
that sometimes even I forget that I'm actually inside a JSX file. 11
So when we write this code we immediately get an error telling us that the style property expects a 12
mapping from style properties to values not a string. 13
And it tells you how it wants you to write this instead. 14
So what's going on here? 15
Well in this case, we're actually providing a string as the value to the style attribute. 16
And this would work fine if this was HTML. 17
But in Javascript it wants this value for the style property as a Javascript object. 18
Let's just remind ourselves. Javascript objects look like this: 19
they exist in a set of curly braces 20
and then they have key value pairs. 21
So in this case, the key would be the word color and this would behave a bit like a variable, 22
so it's not a string. 23
Whereas the value, in terms of CSS anyways, is going to be a string. 24
So in this case, it will be red. 25
And each of these key value pairs in a Javascript object are separated by commas not semicolons as you 26
would see in the style sheet. 27
But in my case, I just want to add a single style which is to change the color to red. 28
And so I'm just going to collapse it down and see it as a simple version. 29
Now let's go ahead and delete this string and try to insert this Javascript object in as the value for 30
this style property. 31
Now remember though, whenever we want to inject some Javascript into an HTML element in JSX, we have 32
to wrap it inside a set of curly braces 33
right? 34
So now that we've got our set of curly braces then we can cut our Javascript object and paste it inside. 35
And our console finally stop screaming at us and accepts our code as valid. 36
But this does end up looking very strange with two sets of curly braces. 37
But this is all because the style property requires a value that is a Javascript object and that object 38
in order for it to be interpreted correctly inside 39
an HTML element, has to have a set of curly braces around it. Instead of a normal expression like 40
say 2 + 3, 41
in this case we're just replacing it with a Javascript object. 42
Now you might ask, well why would we do this right? 43
Because we've already learnt about class based styling and we know that the React documentation in 44
fact recommends to use class based styling using the style sheet to change the appearance of your React 45
elements. 46
So why would we ever want to do this kind of inline styling? 47
Well there are certain cases where this is pretty useful especially when you want styles for certain 48
React elements to update on the fly. 49
So while your app is up and running, if the user does something or the time changes or it's a different 50
day or it's a different hour, you might want to trigger a change in your style 51
right? 52
And you can do that really easily using inline styles. 53
Let me show you what I mean. 54
I'm going to cut my object and I'm going to save it inside a constant. 55
I'm going to call it custom style and set it to equal this object. 56
Now let's go ahead and expand it out again. 57
And while I'm here, I'm gonna add a couple more styles and I want to point out that when you're using 58
CSS properties, remember that they are kebab cased, so lowercase lowercase separated by a hyphen. 59
But in order to use these properties inside your Javascript object you have to convert those names to 60
camel case. 61
So for example, if we want to change the font size instead of writing font-size, we would write font 62
and then it's a capital S and size. And then we can change the size to say 20 pixels. 63
Remember that instead of semicolons which you might be used to when you're writing CSS, we're going to 64
be using commas because we're inside a Javascript object. And instead of simply just writing out 20 pixels 65
or red, the values for each of these key value pairs has to be a string and that includes cases where 66
you have spaces as the value. 67
So for example if I wanted to add a border 68
normally I would write say 1 pixel solid black. 69
Well in this case it's still exactly like this, but it has to be a string with each of these spaces preserved. 70
Now that I've created my custom style constant I can now insert this object inside here as the style. 71
So I've got my curly braces denoting that I'm about to write some Javascript and I'm going to insert 72
my custom style object right there. 73
And as soon as that gets compiled then you can see that we've got our h1 changing its font size, 74
having a border and changing its color all because of this custom style. Now here's the interesting part. 75
If at some point in our code something changes let's say the user did something or the day changed 76
or the time changed became 77
morning to night, 78
something happens and we wanted to change the style of our h1. 79
We don't have to touch any of our code in here. 80
All we have to do is to just update the properties of our custom style object. 81
So let's say that I decided to change its color to, instead of red, let's make it blue. And as soon as I hit 82
save, you'll see that style gets immediately updated. 83
So this means that our style can change on the go. 84
And this is one of the biggest reasons why you would want to use inline styling. 85
Now I recommend having a play around with these CSS properties. So have a look at the documentation for 86
all of the CSS properties and tried to implement some of these other ones and convert them into a format 87
that will get accepted by JSX so that you can see it rendered. And then have a play around with these 88
objects, maybe put the object back in line with the HTML elements in the JSX. Get used to that 89
double curly brace syntax. 90
And once you're happy and you're comfortable with inline properties in JSX then head over to the 91
next lesson well I've got a challenge for you where you're going to apply everything you've learned 92
so far and especially in line and class based styles. As always, this file is gonna be saved for you to 93
mess around with in the course resources if you want to. 94
And the best way of overcoming confusion or just getting used to these concepts is to just clear the slate 95
and try to achieve what we've done in the lesson 96
all by yourself and then referring back to the final code 97
if you need help. 98
So have a play around with that and I'll see you on the next lesson.