From the course: React Practice for Beginners: Build and Modify Basic Components
Join today to access over 25,500 courses taught by industry experts.
Working with styled components - React.js Tutorial
From the course: React Practice for Beginners: Build and Modify Basic Components
Working with styled components
- [Instructor] Let's see styled-components. Our UIs can't reach their full potential without styling, and there's quite a few ways to do this. We can style our components using CSS files, inline styles, or libraries, like styled-components. With the styled-components library, we define styles directly into our JavaScript file, and the result is a fully styled React component. Defining the styles directly in JavaScript using the styled-components library keep styles close to the component they belong to, which can make your code easier to manage. Here's an example that defines a styled button. Please mind that in order for this to work, I had to run npm install styled-components, so this might actually look like a lot, so let's break it down. MovieButton that I'm using on line 20 is a start component created using start.button on line 5. You write regular CSS inside the brackets. No need for class names. Styled-components can handle hover effects, media queries, or theming directly…
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.