From the course: React Practice for Beginners: Build and Modify Basic Components
Join today to access over 24,700 courses taught by industry experts.
Converting a plain JSX element into a styled component - React.js Tutorial
From the course: React Practice for Beginners: Build and Modify Basic Components
Converting a plain JSX element into a styled component
- [Instructor] So, let's see a different scenario. Let's say we already have a plain button. As you can see on line eight, we can convert it into a start component by replacing it with a styled version and this allows us to move the styles into component itself and remove the need for separate CSS files. So in order to convert it, I'd have to specify the styled component. And as you can see, I'm importing styled from styled components on line one and this is very important for this to work. By the way, this doesn't only work with buttons, it can work for all sorts of elements. As you can see, I'm specifying the primary button and giving it some CSS from line 5 to 15, which is placed between backticks. And then in my app, I can go ahead and replace this with my primary button and, of course, I have to close the primary button as well and now the styles are directly tied to the component and there's no need for a CSS file. Having seen this, you know how to refactor existing components…
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.