0Pricing
CSS Academy · Lesson

Styled-components: Tagged Template Literals

Create styled React components using tagged template literals with the styled-components library.

What is Styled-components?

styled-components is a CSS-in-JS library for React that lets you write CSS directly inside JavaScript files using tagged template literals. Each styled component gets auto-scoped unique class names.

Tagged Template Literals

JavaScript tagged template literals let a function process a template string. styled-components uses this to parse CSS:

import styled from 'styled-components';

const Button = styled.button`
  background: royalblue;
  color: white;
  padding: 10px 20px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
`;

// Usage in JSX:
// <Button>Click me</Button>

All lessons in this course

  1. Styled-components: Tagged Template Literals
  2. Emotion: css() and styled()
  3. CSS Modules: Scoped Styles
  4. Vanilla Extract: Zero-Runtime CSS-in-JS
← Back to CSS Academy