Styled Components

Styled Components

Styled Components adalah library CSS-in-JS yang memungkinkan kita menulis CSS langsung di dalam file JavaScript menggunakan template literals. Style melekat pada komponen, bukan pada class global.

Instalasi

npm install styled-components

Cara Membuat Styled Component

import styled from "styled-components";

const Button = styled.button`
  background: linear-gradient(90deg, #7c5cfc, #f472b6);
  color: white;
  padding: 10px 24px;
  border-radius: 12px;
  border: none;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.2s;

  &:hover {
    opacity: 0.85;
  }
`;

Props dalam Styled Components

const Box = styled.div`
  background: ${props => props.primary ? "#7c5cfc" : "#e5e7eb"};
  color: ${props => props.primary ? "white" : "#374151"};
  padding: 16px;
  border-radius: 8px;
`;