From the course: Build Modern Web Apps with React, Hooks, State Management, and APIs Using Vite or Next.js

Unlock this course with a free trial

Join today to access over 25,200 courses taught by industry experts.

Styled Components: Part 1

Styled Components: Part 1

From the course: Build Modern Web Apps with React, Hooks, State Management, and APIs Using Vite or Next.js

Start my 1-month free trial Buy for my team

Styled Components: Part 1

“

Hello and welcome to lesson number two. In this lesson, we'll discuss CSS in JavaScript libraries. CSS in JavaScript libraries allows us to write CSS based content in the JavaScript files such as JSX, TSX etc. The first library that we are going to discuss about is style components. Style component is a CSS in JS library that lets you define styled elements like buttons, cards, etc. using template literals. We can write actual CSS in JavaScript files using the literals that we use in JavaScript define string. That's an example of how we can use style components. As you can see, we have to install this library first. After that, we can define a variable and in that variable, we can have styled.button or any other element that we want to style in the css. After that, we are going to define a template literal string. In that string, we can define the CSS properties such as background color, radius, border, etc. Each of these CSS attributes are going to be defined on that button element…

Contents