Styled-components: 태그된 템플릿 리터럴

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>

const Button = styled.button`
  background: ${props => props.variant === 'danger' ? 'crimson' : 'royalblue'};
  color: white;
  opacity: ${props => props.disabled ? 0.5 : 1};
`;

// <Button variant="danger">Delete</Button>

const Card = styled.div`
  background: var(--card-bg, white);
  color: var(--card-text, #111);
`;
// Set variables via style prop: <Card style={{ '--card-bg': 'navy' }}>

const PrimaryButton = styled(Button)`
  background: royalblue;
  font-weight: bold;
`;

const DangerButton = styled(Button)`
  background: crimson;
`;

const Nav = styled.nav`
  display: flex;

  & a {
    color: white;
    text-decoration: none;
  }

  & a:hover {
    text-decoration: underline;
  }
`;

import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
  *, *::before, *::after { box-sizing: border-box; }
  body { font-family: system-ui, sans-serif; margin: 0; }
`;
// Include <GlobalStyle /> in your app root

import { ThemeProvider } from 'styled-components';

const theme = { colors: { primary: 'royalblue' } };

const Button = styled.button`
  background: ${({ theme }) => theme.colors.primary};
`;

// <ThemeProvider theme={theme}><App /></ThemeProvider>