Learn about separating styled-components from function components.
- [Tutor] In this video, we're going to be making use…of the library styled components…to add a bit of style to our components.…The first thing we're going to do is shut down our server…and use yarn add styled-components…to bring in this library.…Now that styled-components has been added…to our dependencies, we can access this in a new file.…Let's think about the file we want to create though.…So, I had a problem on my webpage.…I don't like that my FloatingActionButton…actually isn't floating, it's beneath the Drawer.…
We can change that by deleting this…here on line 26 through 30,…actually I'm going to cut it with Up+L+X…and I'm going to import a new component I've yet to create.…We'll call this…NavToggleButton…and we'll close it…and I want to make sure that I still pass my toggle prop to it…and then as I think about this more,…I think the styling is going to want to know…the width of the Drawer, so right now,…I'm not specifying a width of the Drawer,…but that is an option that's available to me.…
So, I'm going to say the NavToggleButton needs to know…
- Installing local dependencies
- Generating a starter project
- Deploying to Heroku
- Planning your development process
- Using styled-components
- Styling for mobile
- Setting up models on Graphcool
- Creating Relay mutations
- Adding Relay to your authentication flow
- Protecting routes with authentication
Skill Level Intermediate
2. Deployment Environments
3. App Functionality
4. Implementing Libraries
5. Creating Components
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.