- Read Tutorial
- Watch Guide Video
WEBVTT
1
00:00:00.400 --> 00:00:02.950
Now that we've built out our button component
2
00:00:02.950 --> 00:00:05.050
and it is a styled component,
3
00:00:05.050 --> 00:00:07.080
in this guide, I wanna show you
4
00:00:07.080 --> 00:00:09.880
how we can start to add some dynamic behavior
5
00:00:09.880 --> 00:00:13.560
and dynamic styles to a styled component.
6
00:00:13.560 --> 00:00:16.930
And so what we're gonna do is we're gonna give the ability
7
00:00:16.930 --> 00:00:20.220
to add a custom prop called primary.
8
00:00:20.220 --> 00:00:22.970
And there's nothing special about the key word primary.
9
00:00:22.970 --> 00:00:25.130
It's a very common word used
10
00:00:25.130 --> 00:00:28.350
whenever you're wanting to give a name to a button.
11
00:00:28.350 --> 00:00:29.650
And so that's why we're gonna do it.
12
00:00:29.650 --> 00:00:30.890
But we could call it anything,
13
00:00:30.890 --> 00:00:32.690
we could call it main or featured
14
00:00:32.690 --> 00:00:35.030
or anything like that that we want.
15
00:00:35.030 --> 00:00:37.750
And so that is what we're gonna do in this guide.
16
00:00:37.750 --> 00:00:39.790
And there's a very specific syntax.
17
00:00:39.790 --> 00:00:41.400
You may have seen it in the documentation,
18
00:00:41.400 --> 00:00:44.100
but we're gonna walk through exactly how to build it out
19
00:00:44.100 --> 00:00:45.920
here in this lesson.
20
00:00:45.920 --> 00:00:47.520
So the first thing we need to do
21
00:00:47.520 --> 00:00:50.540
is up top where it says import styled,
22
00:00:50.540 --> 00:00:52.610
we need to import one more module
23
00:00:52.610 --> 00:00:55.190
and this is gonna be a sub-module.
24
00:00:55.190 --> 00:00:58.280
So styled is the default that got exported,
25
00:00:58.280 --> 00:01:01.630
that's why we didn't need to add in any curly brackets.
26
00:01:01.630 --> 00:01:04.150
But now for the secondary one we do.
27
00:01:04.150 --> 00:01:06.920
And this one is gonna be called CSS.
28
00:01:06.920 --> 00:01:09.810
And so CSS is a module that we can use
29
00:01:09.810 --> 00:01:14.300
whenever we wanna dynamically slide in values.
30
00:01:14.300 --> 00:01:16.730
And the syntax that we're going to use
31
00:01:16.730 --> 00:01:18.900
to implement this type of behavior
32
00:01:18.900 --> 00:01:21.010
might look a little bit weird at first.
33
00:01:21.010 --> 00:01:23.750
So I'm gonna try to take it one step at a time
34
00:01:23.750 --> 00:01:26.370
so that it really starts to make sense for you.
35
00:01:26.370 --> 00:01:29.690
So now that we have imported CSS,
36
00:01:29.690 --> 00:01:33.910
what we're gonna do is down below where it says hover here,
37
00:01:33.910 --> 00:01:37.470
we're gonna add in these values.
38
00:01:37.470 --> 00:01:39.320
So because we're using backticks,
39
00:01:39.320 --> 00:01:41.240
that means that in JavaScript
40
00:01:41.240 --> 00:01:43.610
we're able to use string interpolation,
41
00:01:43.610 --> 00:01:47.260
which means we're also able to use conditionals.
42
00:01:47.260 --> 00:01:49.220
So what we're able to do in here
43
00:01:49.220 --> 00:01:52.170
is we're gonna call a basic function,
44
00:01:52.170 --> 00:01:54.750
just an anonymous function inside of here,
45
00:01:54.750 --> 00:01:59.750
and we're gonna say right here that if we have this value,
46
00:02:00.230 --> 00:02:03.100
so I'm gonna say dollar curly bracket,
47
00:02:03.100 --> 00:02:05.750
and then we're gonna pass in props.
48
00:02:05.750 --> 00:02:08.810
So these props, they're slightly different
49
00:02:08.810 --> 00:02:10.600
than the props we've been using
50
00:02:10.600 --> 00:02:13.572
for some other parts of the application.
51
00:02:13.572 --> 00:02:15.660
This is essentially gonna say
52
00:02:15.660 --> 00:02:17.670
that if any props are passed in,
53
00:02:17.670 --> 00:02:21.400
then we're going to change some of the styles.
54
00:02:21.400 --> 00:02:22.710
So I'm gonna say props,
55
00:02:22.710 --> 00:02:25.560
and then we're going to have this function executed.
56
00:02:25.560 --> 00:02:30.030
So from there, I will say our fat arrow function,
57
00:02:30.030 --> 00:02:33.020
and we'll check for props.primary.
58
00:02:33.020 --> 00:02:36.080
So we're checking to see here if we are using
59
00:02:36.080 --> 00:02:40.020
and we're passing in the name primary.
60
00:02:40.020 --> 00:02:43.360
And then from there, we're gonna add two ampersand.
61
00:02:43.360 --> 00:02:46.160
So this is gonna say, if we have props primary,
62
00:02:46.160 --> 00:02:50.780
then I want you to add in these other styles.
63
00:02:50.780 --> 00:02:53.240
And this is where the syntax gets a little bit different.
64
00:02:53.240 --> 00:02:56.450
This isn't like a standard ternary operator,
65
00:02:56.450 --> 00:02:59.480
but what we're doing is we're listening for this function,
66
00:02:59.480 --> 00:03:00.700
we're listening for props,
67
00:03:00.700 --> 00:03:03.840
then we're checking to see, do we have props primary?
68
00:03:03.840 --> 00:03:05.347
Has that been passed in?
69
00:03:05.347 --> 00:03:09.640
And then if so, then I want you to execute this command,
70
00:03:09.640 --> 00:03:13.760
which is gonna be CSS, which is the module we just imported,
71
00:03:13.760 --> 00:03:16.340
then we're gonna use backticks once again.
72
00:03:16.340 --> 00:03:18.300
And now inside of here,
73
00:03:18.300 --> 00:03:20.210
I'm gonna just put this on another line.
74
00:03:20.210 --> 00:03:21.420
After I hit Save
75
00:03:21.420 --> 00:03:24.550
Prettier is gonna format all of this for us nicely.
76
00:03:24.550 --> 00:03:27.460
And so I wanna change my background color.
77
00:03:27.460 --> 00:03:30.100
So first one's gonna be the background color.
78
00:03:30.100 --> 00:03:32.160
And let's change this one,
79
00:03:32.160 --> 00:03:34.710
I'm gonna open up my colors once again.
80
00:03:34.710 --> 00:03:38.940
And this is gonna switch to using our regular primary color.
81
00:03:38.940 --> 00:03:41.860
So I'm gonna grab that hexadecimal value.
82
00:03:41.860 --> 00:03:44.100
Then I'm gonna make the border the same thing.
83
00:03:44.100 --> 00:03:46.860
So I'm gonna say border one pixel solid,
84
00:03:46.860 --> 00:03:49.530
and then that same hexadecimal value.
85
00:03:49.530 --> 00:03:52.530
And then lastly, we're gonna switch to the text color
86
00:03:52.530 --> 00:03:54.650
so that it's white.
87
00:03:54.650 --> 00:03:56.720
Okay, and you can see that's the way
88
00:03:56.720 --> 00:03:59.880
the formatting has gotten updated by Prettier.
89
00:03:59.880 --> 00:04:01.590
So nothing's changed here.
90
00:04:01.590 --> 00:04:03.280
And the reason why nothing has changed
91
00:04:03.280 --> 00:04:05.490
is because this function,
92
00:04:05.490 --> 00:04:08.120
this anonymous function is only gonna run
93
00:04:08.120 --> 00:04:11.660
if we pass in the keyword primary as a prop.
94
00:04:11.660 --> 00:04:14.380
So now let's go and let's go do that.
95
00:04:14.380 --> 00:04:17.020
So inside of our button here,
96
00:04:17.020 --> 00:04:20.650
I'm just gonna pass in the prop of primary.
97
00:04:20.650 --> 00:04:24.760
Hit save, and now you can see that that has worked.
98
00:04:24.760 --> 00:04:27.800
So we now have a dynamic button
99
00:04:27.800 --> 00:04:30.400
and where we can change that color
100
00:04:30.400 --> 00:04:33.720
based on the value we passed into it.
101
00:04:33.720 --> 00:04:37.460
So say that we wanted to create a collection of colors,
102
00:04:37.460 --> 00:04:39.280
we could do that right here.
103
00:04:39.280 --> 00:04:42.520
So we could have this function here for primary,
104
00:04:42.520 --> 00:04:44.090
and then we could have another one.
105
00:04:44.090 --> 00:04:45.400
Say you want a red button,
106
00:04:45.400 --> 00:04:48.300
we could create one and call it warning
107
00:04:48.300 --> 00:04:50.470
and anytime you use the warning prop,
108
00:04:50.470 --> 00:04:51.760
the button would turn red.
109
00:04:51.760 --> 00:04:53.860
And so you have the ability to put in
110
00:04:53.860 --> 00:04:58.050
some view specific logic right here.
111
00:04:58.050 --> 00:05:01.910
Now one thing I want to add as just kind of a warning,
112
00:05:01.910 --> 00:05:04.020
and it's a best practice
113
00:05:04.020 --> 00:05:06.960
when it comes to working with these styled components,
114
00:05:06.960 --> 00:05:11.010
I don't want you to use a lot of logic
115
00:05:11.010 --> 00:05:12.550
inside of these components.
116
00:05:12.550 --> 00:05:14.670
If you find that you're starting to use
117
00:05:14.670 --> 00:05:16.150
a lot of conditionals,
118
00:05:16.150 --> 00:05:19.890
and you're starting to put in quite a bit of business logic
119
00:05:19.890 --> 00:05:21.870
directly in the styled component,
120
00:05:21.870 --> 00:05:23.960
that's probably a good indicator
121
00:05:23.960 --> 00:05:26.710
that you shouldn't be using a styled component,
122
00:05:26.710 --> 00:05:30.550
you should actually turn that into a full component
123
00:05:30.550 --> 00:05:33.640
so that you can structure it a little bit better
124
00:05:33.640 --> 00:05:35.540
because as you may have guessed,
125
00:05:35.540 --> 00:05:37.160
especially if you're like me,
126
00:05:37.160 --> 00:05:40.190
the first time I saw this syntax, this was pretty confusing,
127
00:05:40.190 --> 00:05:42.030
that's a really weird way
128
00:05:42.030 --> 00:05:44.460
of being able to implement this type of behavior.
129
00:05:44.460 --> 00:05:49.460
So if you start to add even more logic and more conditionals
130
00:05:49.810 --> 00:05:51.250
this could be pretty tricky.
131
00:05:51.250 --> 00:05:53.610
So my good rule of thumb
132
00:05:53.610 --> 00:05:55.780
is when working with styled components,
133
00:05:55.780 --> 00:06:00.780
make sure that they are really as simplistic as possible.
134
00:06:00.810 --> 00:06:02.770
These are really supposed to just be
135
00:06:02.770 --> 00:06:04.740
helper libraries for you
136
00:06:04.740 --> 00:06:07.030
that you can create and then you can call
137
00:06:07.030 --> 00:06:09.310
from different parts of your application,
138
00:06:09.310 --> 00:06:12.550
and they're not really supposed to do a lot,
139
00:06:12.550 --> 00:06:14.840
they're really, the only reason they're there
140
00:06:14.840 --> 00:06:17.810
is to make it easy to have shared styles.
141
00:06:17.810 --> 00:06:22.050
And so you can see also if you start you can click on this,
142
00:06:22.050 --> 00:06:25.610
and you'll be able to see that you actually have the ability
143
00:06:25.610 --> 00:06:27.690
to treat it like a regular a-tag.
144
00:06:27.690 --> 00:06:29.870
So let's finish that out right here.
145
00:06:29.870 --> 00:06:31.860
So in the button tag,
146
00:06:31.860 --> 00:06:34.450
even though we didn't pass in any other props,
147
00:06:34.450 --> 00:06:37.320
because we right here,
148
00:06:37.320 --> 00:06:40.620
because we told it that it was an a-tag,
149
00:06:40.620 --> 00:06:42.440
watch what we're gonna be able to do.
150
00:06:42.440 --> 00:06:47.440
Inside of button here, I can pass in an href prop.
151
00:06:47.520 --> 00:06:51.870
And so this href prop is gonna be the URL.
152
00:06:51.870 --> 00:06:55.150
And then we can also even use target.
153
00:06:55.150 --> 00:06:59.030
So I can say target equals underscore blank.
154
00:06:59.030 --> 00:07:03.370
So because we declared this as a regular a-tag,
155
00:07:03.370 --> 00:07:05.580
that means that the styled component
156
00:07:05.580 --> 00:07:07.990
is generating an a-tag for us.
157
00:07:07.990 --> 00:07:10.870
And any other props that we pass in,
158
00:07:10.870 --> 00:07:13.530
are gonna be able to be rendered accordingly.
159
00:07:13.530 --> 00:07:16.890
So I'm gonna hit Save here, just so you can review.
160
00:07:16.890 --> 00:07:18.680
We have this button component,
161
00:07:18.680 --> 00:07:21.830
we passed in an href prop and a target
162
00:07:21.830 --> 00:07:24.210
and then our own custom primary one.
163
00:07:24.210 --> 00:07:25.870
And now if you come over here,
164
00:07:25.870 --> 00:07:28.980
you can click on it and you can see it actually takes you
165
00:07:28.980 --> 00:07:31.000
to the right location.
166
00:07:31.000 --> 00:07:32.220
So that's pretty cool.
167
00:07:32.220 --> 00:07:34.740
That means it's actually working properly.
168
00:07:34.740 --> 00:07:36.920
Now the only change I think I'd like to make here
169
00:07:36.920 --> 00:07:40.320
is notice how when I put in those values,
170
00:07:40.320 --> 00:07:43.410
notice how it actually changed and added that underline.
171
00:07:43.410 --> 00:07:44.560
Well, we can fix that.
172
00:07:44.560 --> 00:07:49.560
So inside of our styles here, I can just add text decoration
173
00:07:51.550 --> 00:07:54.240
and switch that to none,
174
00:07:54.240 --> 00:07:56.330
it should be all that I have to do there.
175
00:07:56.330 --> 00:07:58.440
Hit Save, and there you go,
176
00:07:58.440 --> 00:08:01.270
and we're back to the exact set of styles that we want,
177
00:08:01.270 --> 00:08:02.960
and now they're fully functional.
178
00:08:02.960 --> 00:08:04.910
You can go and you can test this out
179
00:08:04.910 --> 00:08:07.043
on any of your other items.
180
00:08:07.043 --> 00:08:09.720
We haven't made it mobile responsive yet,
181
00:08:09.720 --> 00:08:12.070
so it doesn't look good scrunched up like that.
182
00:08:12.070 --> 00:08:13.840
Maybe I you can click on this one
183
00:08:13.840 --> 00:08:17.740
and click to visit DevCamp and it will take you right there.
184
00:08:17.740 --> 00:08:21.610
So each one of these buttons now is fully functional,
185
00:08:21.610 --> 00:08:25.050
including the ability to have things like the target blank
186
00:08:25.050 --> 00:08:26.750
where it opens up in a new tab.
187
00:08:26.750 --> 00:08:29.600
And so hopefully, this was a good exercise for you.
188
00:08:29.600 --> 00:08:31.770
Hopefully, you're able to see
189
00:08:31.770 --> 00:08:36.770
how you can use styled components to wrap up a set of styles
190
00:08:37.150 --> 00:08:41.650
and then reuse it from anywhere in the application.
191
00:08:41.650 --> 00:08:42.720
And just to review,
192
00:08:42.720 --> 00:08:47.630
because this is gonna be the end of our style section
193
00:08:47.630 --> 00:08:50.850
and we're gonna start getting into other different features,
194
00:08:50.850 --> 00:08:53.410
React features in the next few sections,
195
00:08:53.410 --> 00:08:55.890
we've now walked through three different ways
196
00:08:55.890 --> 00:08:57.640
that you can implement styles.
197
00:08:57.640 --> 00:08:59.810
You can add inline styles,
198
00:08:59.810 --> 00:09:03.890
that is where like in our portfolio detail component here.
199
00:09:03.890 --> 00:09:06.550
That's where you can wrap up your styles
200
00:09:06.550 --> 00:09:09.900
as an object in the component directly.
201
00:09:09.900 --> 00:09:14.900
We also saw how we could add in our own set of other styles
202
00:09:15.760 --> 00:09:19.530
like we did with say our detail here,
203
00:09:19.530 --> 00:09:23.650
where we can write normal SAS or CSS code.
204
00:09:23.650 --> 00:09:26.890
And then we import that directly into the application.
205
00:09:26.890 --> 00:09:30.010
And we can treat it like a standard application
206
00:09:30.010 --> 00:09:32.320
that's using normal style sheets.
207
00:09:32.320 --> 00:09:33.500
And then lastly,
208
00:09:33.500 --> 00:09:38.460
we saw how we can use the styled component library
209
00:09:38.460 --> 00:09:42.290
so that we can add styles directly into a component
210
00:09:42.290 --> 00:09:45.420
and then share that component throughout the application.
211
00:09:45.420 --> 00:09:47.920
So really nice job in going through that.
212
00:09:47.920 --> 00:09:49.780
You now know three different ways
213
00:09:49.780 --> 00:09:52.203
to add styles to a React application.