- Read Tutorial
- Watch Guide Video
WEBVTT
1
00:00:00.620 --> 00:00:01.700
Now that you've gone through
2
00:00:01.700 --> 00:00:04.010
the styled components documentation,
3
00:00:04.010 --> 00:00:05.510
hopefully you have a good feel
4
00:00:05.510 --> 00:00:08.300
for how to build these types of components.
5
00:00:08.300 --> 00:00:11.810
And in this guide, we're gonna build out a button component.
6
00:00:11.810 --> 00:00:13.190
So let's get started.
7
00:00:13.190 --> 00:00:15.980
I'm gonna open up the file system
8
00:00:15.980 --> 00:00:18.500
and inside of our shared directory,
9
00:00:18.500 --> 00:00:22.470
so this is inside of src, components and then shared,
10
00:00:22.470 --> 00:00:26.120
I'm gonna create a new component called button.
11
00:00:26.120 --> 00:00:30.870
So I'm gonna create a new file here called Button.js
12
00:00:30.870 --> 00:00:34.150
and I'm just gonna close out that file system.
13
00:00:34.150 --> 00:00:38.020
So now, let's just create a basic version of the button.
14
00:00:38.020 --> 00:00:40.240
I don't wanna get into implementing all
15
00:00:40.240 --> 00:00:41.780
of the styles right away.
16
00:00:41.780 --> 00:00:43.560
I first wanna make sure
17
00:00:43.560 --> 00:00:46.360
that I am working with the correct syntax
18
00:00:46.360 --> 00:00:49.960
and that I have everything installed properly.
19
00:00:49.960 --> 00:00:52.130
So we'll get started with that here.
20
00:00:52.130 --> 00:00:55.310
I'm gonna first import our values,
21
00:00:55.310 --> 00:00:59.700
our library values from the styled components directory.
22
00:00:59.700 --> 00:01:04.130
So I'm gonna say I want to import styled
23
00:01:04.130 --> 00:01:07.517
from styled-components
24
00:01:11.050 --> 00:01:13.560
and now let's actually build it out,
25
00:01:13.560 --> 00:01:15.000
and this is gonna be pretty similar
26
00:01:15.000 --> 00:01:16.820
to what you saw in the documentation
27
00:01:16.820 --> 00:01:17.900
and then we're gonna add
28
00:01:17.900 --> 00:01:20.660
some more custom styling in a bit.
29
00:01:20.660 --> 00:01:23.370
So first, I want to export a button.
30
00:01:23.370 --> 00:01:26.140
So I'm gonna say export default,
31
00:01:26.140 --> 00:01:30.260
and then this is going to call that styled class
32
00:01:30.260 --> 00:01:31.340
that we just brought in
33
00:01:31.340 --> 00:01:32.880
or that styled module,
34
00:01:32.880 --> 00:01:35.010
and because this is gonna be something
35
00:01:35.010 --> 00:01:37.430
that we want users to be able to click,
36
00:01:37.430 --> 00:01:40.430
we're gonna say styled.a.
37
00:01:40.430 --> 00:01:45.110
So this is like we're creating an a tag set of styles.
38
00:01:45.110 --> 00:01:47.690
So an a tag, usually in HTML,
39
00:01:47.690 --> 00:01:50.060
is gonna be a link tag.
40
00:01:50.060 --> 00:01:53.700
However, because you can apply any type of styles you want,
41
00:01:53.700 --> 00:01:56.350
we're gonna actually make it look like a button
42
00:01:56.350 --> 00:01:58.660
and so that's what we're gonna do here.
43
00:01:58.660 --> 00:01:59.947
We're gonna say styled.a
44
00:02:00.890 --> 00:02:02.810
and then if you went through the documentation,
45
00:02:02.810 --> 00:02:04.120
you know that the syntax
46
00:02:04.120 --> 00:02:07.720
is to add back ticks right after that
47
00:02:07.720 --> 00:02:10.650
and now, inside of here, this is where we can place all
48
00:02:10.650 --> 00:02:11.540
of our styles.
49
00:02:11.540 --> 00:02:13.950
So make sure that you don't use apostrophes here.
50
00:02:13.950 --> 00:02:15.220
These are back ticks.
51
00:02:15.220 --> 00:02:16.530
And the reason for that
52
00:02:16.530 --> 00:02:18.470
is because when we're using back ticks,
53
00:02:18.470 --> 00:02:21.760
we are able to use string interpolation.
54
00:02:21.760 --> 00:02:25.140
And so that's gonna give us eventually the ability
55
00:02:25.140 --> 00:02:28.260
to have some custom and some dynamic styles
56
00:02:28.260 --> 00:02:29.530
for this button.
57
00:02:29.530 --> 00:02:33.150
So right now, let's start adding a few values.
58
00:02:33.150 --> 00:02:36.540
So I'm gonna add in the border-radius
59
00:02:36.540 --> 00:02:39.100
and let's make this just five pixels
60
00:02:39.100 --> 00:02:41.780
and then let's add a background.
61
00:02:41.780 --> 00:02:43.790
So I'll give a background
62
00:02:43.790 --> 00:02:45.660
and for this, for right now
63
00:02:45.660 --> 00:02:47.630
we'll just say the background's gonna be white
64
00:02:47.630 --> 00:02:49.070
and then let's add a border.
65
00:02:49.070 --> 00:02:53.180
So add a border of one pixel solid
66
00:02:53.180 --> 00:02:56.100
and then I'm gonna open up that color file
67
00:02:56.100 --> 00:02:57.090
that we used before
68
00:02:57.090 --> 00:02:59.500
and I'm gonna use this charcoal color.
69
00:02:59.500 --> 00:03:03.890
This 42454a hexadecimal.
70
00:03:03.890 --> 00:03:05.550
And so I'm just gonna use that
71
00:03:05.550 --> 00:03:09.140
and for right now, the last thing I'm gonna do
72
00:03:09.140 --> 00:03:11.100
is add in a color value.
73
00:03:11.100 --> 00:03:13.080
So this is gonna be the text color
74
00:03:13.080 --> 00:03:16.540
and then I'm gonna use that same value.
75
00:03:16.540 --> 00:03:19.840
And this is all I'm gonna do for right now.
76
00:03:19.840 --> 00:03:23.100
We're gonna add in quite a bit more styling in a bit.
77
00:03:23.100 --> 00:03:24.540
But first, I wanna make sure
78
00:03:24.540 --> 00:03:25.780
that I have my syntax right.
79
00:03:25.780 --> 00:03:28.870
And this is following the same type of pattern
80
00:03:28.870 --> 00:03:30.730
that I would follow if I were
81
00:03:30.730 --> 00:03:33.830
to be building out a real-life application,
82
00:03:33.830 --> 00:03:36.690
especially if I'd never used this library before.
83
00:03:36.690 --> 00:03:40.100
I don't wanna get into adding all kinds of custom behavior
84
00:03:40.100 --> 00:03:42.390
and custom styles right away
85
00:03:42.390 --> 00:03:45.440
because what I've found can happen many times
86
00:03:45.440 --> 00:03:48.100
is that if I've never used a library before,
87
00:03:48.100 --> 00:03:49.640
then I might make a mistake.
88
00:03:49.640 --> 00:03:51.440
I might have copied something wrong,
89
00:03:51.440 --> 00:03:53.900
I might have misunderstood the documentation
90
00:03:53.900 --> 00:03:57.450
or maybe there was an error with the installation
91
00:03:57.450 --> 00:03:59.310
or the configuration process.
92
00:03:59.310 --> 00:04:01.870
I don't wanna go too far down the line
93
00:04:01.870 --> 00:04:05.410
in building this out without performing a small test.
94
00:04:05.410 --> 00:04:07.020
So that's what we're gonna do here.
95
00:04:07.020 --> 00:04:08.810
And so I'm gonna open up
96
00:04:08.810 --> 00:04:12.840
that PortfolioDetail component page here
97
00:04:12.840 --> 00:04:15.240
and I'm gonna import that button.
98
00:04:15.240 --> 00:04:17.530
So right below Axios here,
99
00:04:17.530 --> 00:04:19.600
I'm gonna say I wanna import the Button
100
00:04:19.600 --> 00:04:24.600
from ../components/shared/Button just like this.
101
00:04:27.760 --> 00:04:29.440
Not NavBar, Button.
102
00:04:29.440 --> 00:04:32.000
Just like that and now we can use this button.
103
00:04:32.000 --> 00:04:34.532
So if I come all the way down,
104
00:04:34.532 --> 00:04:36.860
so right where we have that a tag,
105
00:04:36.860 --> 00:04:39.720
we're gonna get rid of the a tag
106
00:04:39.720 --> 00:04:41.730
and instead, I'm gonna say
107
00:04:41.730 --> 00:04:44.264
that I want to use this Button here.
108
00:04:44.264 --> 00:04:48.680
And then I'm gonna remove that closing out a tag.
109
00:04:48.680 --> 00:04:49.840
So inside of the button,
110
00:04:49.840 --> 00:04:52.030
I'm just gonna say Visit the name
111
00:04:52.030 --> 00:04:54.180
and then that's all that we need to do.
112
00:04:54.180 --> 00:04:57.010
So let's test this out and let's see if this is working.
113
00:04:57.010 --> 00:04:58.870
So I'm gonna open up Google Chrome
114
00:04:58.870 --> 00:05:01.080
and go to one of these
115
00:05:01.080 --> 00:05:03.230
and you can see, we have our button.
116
00:05:03.230 --> 00:05:05.030
Now, it doesn't have all the styles we want yet
117
00:05:05.030 --> 00:05:07.920
but don't worry, what we're doing right here
118
00:05:07.920 --> 00:05:09.670
is we're testing out to make sure
119
00:05:09.670 --> 00:05:11.650
that this is working and it is.
120
00:05:11.650 --> 00:05:13.800
We have the border radius,
121
00:05:13.800 --> 00:05:15.060
we have a background color
122
00:05:15.060 --> 00:05:17.520
and we have the color for the text.
123
00:05:17.520 --> 00:05:19.380
So this no longer looks a link.
124
00:05:19.380 --> 00:05:22.160
It's starting to look like a button.
125
00:05:22.160 --> 00:05:25.890
So let's go and let's add the remaining styles
126
00:05:25.890 --> 00:05:28.500
that we want inside of our button.
127
00:05:28.500 --> 00:05:30.400
So we have this border-radius.
128
00:05:30.400 --> 00:05:33.280
Now, right below color, let's add some padding.
129
00:05:33.280 --> 00:05:36.420
So for padding, I'm gonna go with something pretty similar
130
00:05:36.420 --> 00:05:38.440
to what they had in their documentation,
131
00:05:38.440 --> 00:05:42.950
which I believe was 0.5rem and then 1rem
132
00:05:42.950 --> 00:05:46.032
and then I'm gonna do the same thing with margin,
133
00:05:46.032 --> 00:05:49.410
and let's hit Save and open this up.
134
00:05:49.410 --> 00:05:51.770
And I'm also gonna open this up on the side,
135
00:05:51.770 --> 00:05:54.010
just so we don't have to keep switching back and forth
136
00:05:54.010 --> 00:05:55.480
between the windows.
137
00:05:55.480 --> 00:05:58.585
So here you can see that looks really good.
138
00:05:58.585 --> 00:06:00.310
That's starting to give us some
139
00:06:00.310 --> 00:06:01.890
of the styles we're looking for.
140
00:06:01.890 --> 00:06:03.170
We now have some padding
141
00:06:03.170 --> 00:06:05.260
and you can't see it without inspecting
142
00:06:05.260 --> 00:06:07.020
but we do have margin there.
143
00:06:07.020 --> 00:06:09.230
Okay, so we have our padding, our margin,
144
00:06:09.230 --> 00:06:10.780
we have our background, we have our color,
145
00:06:10.780 --> 00:06:13.870
we have a border and let's see what else we want.
146
00:06:13.870 --> 00:06:16.950
Let's say that we wanna have a font-size.
147
00:06:16.950 --> 00:06:21.890
So I'm gonna go with a font-size of 1.5rem.
148
00:06:21.890 --> 00:06:23.930
Hit Save, you'll see that refresh
149
00:06:23.930 --> 00:06:25.350
over on the right-hand side.
150
00:06:25.350 --> 00:06:27.270
There you go, we have a larger font.
151
00:06:27.270 --> 00:06:31.250
And let's go with a font-weight of 900,
152
00:06:31.250 --> 00:06:34.400
just to give a little bit of a nice and bold font,
153
00:06:34.400 --> 00:06:35.520
just like that.
154
00:06:35.520 --> 00:06:37.890
And let's also add a transition.
155
00:06:37.890 --> 00:06:40.230
We're not gonna see anything on this right now
156
00:06:40.230 --> 00:06:42.820
but we will when we implement some
157
00:06:42.820 --> 00:06:44.560
of our dynamic behaviors.
158
00:06:44.560 --> 00:06:46.930
So for transition, let's go with 0.5 seconds,
159
00:06:48.610 --> 00:06:49.810
so half of a second.
160
00:06:49.810 --> 00:06:54.370
And then that's gonna be ease-in-out.
161
00:06:54.370 --> 00:06:58.290
And then we can also treat this like our Sass style.
162
00:06:58.290 --> 00:07:01.970
So I can add a pseudo state right here.
163
00:07:01.970 --> 00:07:03.110
A pseudo selector.
164
00:07:03.110 --> 00:07:07.352
So I can say &: and then hover.
165
00:07:07.352 --> 00:07:10.210
And let's add a box-shadow here.
166
00:07:10.210 --> 00:07:15.210
So I'm gonna say box-shadow: 0 pixels 10 pixels 20 pixels
167
00:07:17.530 --> 00:07:18.913
and then an rgba.
168
00:07:21.223 --> 00:07:22.700
And these are very standard.
169
00:07:22.700 --> 00:07:25.340
The only reason why I even knew how to use these numbers,
170
00:07:25.340 --> 00:07:28.260
I've kind of used these in many different applications.
171
00:07:28.260 --> 00:07:30.050
I can go zero, 10 and 20
172
00:07:30.050 --> 00:07:33.070
and that usually gives you a nice and just kind
173
00:07:33.070 --> 00:07:36.170
of a generic type of box-shadow.
174
00:07:36.170 --> 00:07:37.600
Now, for rgba,
175
00:07:37.600 --> 00:07:42.600
I wanna go zero, zero, zero and then 0.3.
176
00:07:44.370 --> 00:07:47.010
Okay, let's hit Save
177
00:07:47.010 --> 00:07:48.471
and let's see if this is working.
178
00:07:48.471 --> 00:07:52.200
So now if I come here and I hover over,
179
00:07:52.200 --> 00:07:53.530
there you go, look at that.
180
00:07:53.530 --> 00:07:57.260
Now it is actually looking like a real button.
181
00:07:57.260 --> 00:08:00.100
We have that nice little shadow effect.
182
00:08:00.100 --> 00:08:02.840
And I'm also gonna add one more thing here.
183
00:08:02.840 --> 00:08:04.740
I'm gonna add a pointer.
184
00:08:04.740 --> 00:08:05.810
Oh, not that. There we go.
185
00:08:05.810 --> 00:08:07.790
I wanna do a pointer
186
00:08:07.790 --> 00:08:10.290
and I always get these ones switched.
187
00:08:10.290 --> 00:08:12.720
I always forget if it's gonna be cursor
188
00:08:12.720 --> 00:08:14.720
and then pointer or vice versa.
189
00:08:14.720 --> 00:08:16.460
And whenever that happens,
190
00:08:16.460 --> 00:08:19.060
you know the thing to do is to open up your Inspector
191
00:08:19.060 --> 00:08:20.670
'cause we can actually test this out.
192
00:08:20.670 --> 00:08:23.120
So I'm gonna say Inspect.
193
00:08:23.120 --> 00:08:24.800
I'm gonna pop this out
194
00:08:24.800 --> 00:08:26.690
so that we can see it here.
195
00:08:26.690 --> 00:08:29.130
And let's select this button.
196
00:08:29.130 --> 00:08:30.520
You can see that we have all
197
00:08:30.520 --> 00:08:33.410
of these nice button values here
198
00:08:33.410 --> 00:08:36.670
and you can also see all of the values
199
00:08:36.670 --> 00:08:37.850
that we entered in.
200
00:08:37.850 --> 00:08:39.800
These are all right here.
201
00:08:39.800 --> 00:08:41.730
So these have been translated.
202
00:08:41.730 --> 00:08:44.390
They generated a custom class
203
00:08:44.390 --> 00:08:46.300
and then from there, what they did
204
00:08:46.300 --> 00:08:48.230
is they applied each one of those styles,
205
00:08:48.230 --> 00:08:50.020
just like we wrote them out.
206
00:08:50.020 --> 00:08:52.430
So now what we can do is start typing in yes,
207
00:08:52.430 --> 00:08:54.920
it's cursor and then pointer.
208
00:08:54.920 --> 00:08:56.980
And so now, if you hover over,
209
00:08:56.980 --> 00:08:59.040
you can see that the cursor's actually using
210
00:08:59.040 --> 00:09:00.520
that pointer value.
211
00:09:00.520 --> 00:09:02.800
So you can either just type that in
212
00:09:02.800 --> 00:09:05.042
or you can copy and paste it.
213
00:09:05.042 --> 00:09:07.620
So I'm going to do that.
214
00:09:07.620 --> 00:09:11.010
Hit Save and now it has refreshed
215
00:09:11.010 --> 00:09:12.550
and now if I hover over,
216
00:09:12.550 --> 00:09:15.310
you can see that that is working nicely.
217
00:09:15.310 --> 00:09:17.620
So great job if you went through that.
218
00:09:17.620 --> 00:09:22.370
We have now implemented a full styled component button
219
00:09:22.370 --> 00:09:25.420
that we can call from anywhere in the application.
220
00:09:25.420 --> 00:09:26.670
So now that we did that,
221
00:09:26.670 --> 00:09:28.540
in the next guide, we're gonna see
222
00:09:28.540 --> 00:09:31.170
how we can add some dynamic behavior
223
00:09:31.170 --> 00:09:35.163
and how we can pass in some custom props to our button.