Set up Styled Components in your Next.js project to write CSS-in-JS with ease.

Use this when starting a project or adding Styled Components to an existing Next.js app for scoped styling.

Install Styled Components and create a basic styled button:

npm install styled-components
// app/page.tsx
'use client';

import styled from 'styled-components';

const Button = styled.button`
  padding: 10px 20px;
  background: #1C2526;
  color: #fff;
`;

export default function Home() {
  return <Button>Click Me</Button>;
}

Add babel-plugin-styled-components to your .babelrc for better debugging with display names.

Write CSS that’s automatically scoped to a component, avoiding global namespace conflicts.

Ideal for reusable components like buttons or cards that need isolated styles.

Create a styled div with unique styles:

// app/page.tsx
'use client';

import styled from 'styled-components';

const Card = styled.div`
  padding: 20px;
  background: #E8E2D1;
  border-radius: 8px;
`;

export default function Home() {
  return <Card>My Card</Card>;
}

Use the VSCode Styled Components extension for syntax highlighting and IntelliSense.

Pass props to styled components to change styles dynamically based on state or conditions.

Use this for interactive UI elements like buttons that change color when active.

Make a button that changes based on a prop:

// app/page.tsx
'use client';

import styled from 'styled-components';

const Button = styled.button<{ active?: boolean }>`
  padding: 10px;
  background: ${props => (props.active ? '#1C2526' : '#ccc')};
  color: ${props => (props.active ? '#fff' : '#000')};
`;

export default function Home() {
  return <Button active>Active Button</Button>;
}

Combine props with TypeScript for type-safe dynamic styling—add { active?: boolean }.

Centralize your design system with a theme object accessible to all styled components.

Perfect for maintaining consistent colors, fonts, or sizes across your app.

Set up theming in Next.js:

// components/ThemeProvider.tsx
'use client';

import { ThemeProvider } from 'styled-components';

const theme = { colors: { primary: '#1C2526', text: '#333' } };

export default function App({ children }) {
  return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
}

// app/page.tsx
'use client';

import styled from 'styled-components';

const Title = styled.h1`
  color: ${props => props.theme.colors.primary};
`;

export default function Home() {
  return <Title>Hello</Title>;
}

Wrap your app in app/layout.tsx with the ThemeProvider to make the theme globally available.

Extend existing styled components to create variations without rewriting CSS.

Use this for creating button variants or modifying base components efficiently.

Extend a base button:

// app/page.tsx
'use client';

import styled from 'styled-components';

const Button = styled.button`
  padding: 10px;
  background: #1C2526;
  color: #fff;
`;

const LargeButton = styled(Button)`
  padding: 15px 30px;
  font-size: 1.2rem;
`;

export default function Home() {
  return <LargeButton>Big Button</LargeButton>;
}

Use as prop to render a styled component as a different HTML element (e.g., <Button as="a">).

Add animations to your components using the keyframes helper for dynamic effects.

Great for hover effects, loading spinners, or transitions in your UI.

Create a fade-in animation:

// app/page.tsx
'use client';

import styled, { keyframes } from 'styled-components';

const fadeIn = keyframes`
  from { opacity: 0; }
  to { opacity: 1; }
`;

const Box = styled.div`
  animation: ${fadeIn} 1s ease-in;
  background: #E8E2D1;
  padding: 20px;
`;

export default function Home() {
  return <Box>Fading Box</Box>;
}

Reuse keyframes across components by defining them outside the styled definition.

Apply global CSS rules like resets or base styles using createGlobalStyle.

Use this for setting default fonts, margins, or box-sizing across your entire app.

Add global styles in Next.js:

// components/GlobalStyles.tsx
'use client';

import { createGlobalStyle } from 'styled-components';

const GlobalStyles = createGlobalStyle`
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  body {
    font-family: 'Montserrat', sans-serif;
  }
`;

export default function GlobalStylesComponent() {
  return <GlobalStyles />;
}

// app/layout.tsx
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <GlobalStylesComponent />
        {children}
      </body>
    </html>
  );
}

Include GlobalStylesComponent in app/layout.tsx to ensure it applies to all pages.

Enhance Styled Components with TypeScript for better prop typing and theme access.

Use this in larger projects to catch styling errors during development.

Type a styled component with props and theme:

// types/styled.d.ts
declare module 'styled-components' {
  export interface DefaultTheme {
    colors: { primary: string; text: string };
  }
}

// app/page.tsx
'use client';

import styled from 'styled-components';

const Button = styled.button<{ active?: boolean }>`
  background: ${props => props.active ? props.theme.colors.primary : '#ccc'};
  color: ${props => props.theme.colors.text};
`;

export default function Home() {
  return <Button active>Typed Button</Button>;
}

Add a styled.d.ts file to define your theme interface for IntelliSense in VSCode.