Skip to main content
Brave Programmer Logo

BraveProgrammer

BraveProgrammer

HomeProjectsBlogsCoursesLessonsAbout

Site footer

BraveProgrammer

Free coding courses, practical tutorials, and real projects from BraveProgrammer. Learn web development with React, Next.js, and TypeScript.

Navigation

  • Home
  • Projects
  • Blogs
  • Courses

Resources

  • About
  • Lessons

© 2026 BraveProgrammer. All rights reserved.

  1. Courses
  2. /
  3. CSS Basics to Advanced

Lesson 43 of 50 · css

CSS‑in‑JS (Styled‑Components, Emotion)

Duration: 9 mins

Write CSS inside JavaScript, enabling props‑driven styling.

import styled from 'styled-components';
const Button = styled.button`
  background:${props => props.primary ? '#0066cc' : '#ccc'};
  color:#fff; padding:0.5rem 1rem;
`;
  • Styles are scoped to the component.
  • Supports theming via ThemeProvider.
Previous: CSS Modules (Scoped CSS)Next: CSS Houdini – The Paint API