styled-components(전역)

// main.tsx
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App.tsx";
import { ThemeProvider } from "styled-components";

const theme = {
  colors: {
    primary: "red",
    secondary: "#gray",
  },
  fontSizes: {
    normal: "16px",
    large: "20px",
  },
};
createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <ThemeProvider theme={theme}>
      <App />
    </ThemeProvider>
  </StrictMode>,
);

// App.tsx
import styled, { keyframes, css } from "styled-components";

const boxShadowMixin = css`
  margin: 20px;
  box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.5);
`;

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

const Title = styled.h1<{ $color: string; $decoration: string }>`
  color: ${(props) => props.$color};
  text-decoration: ${(props) => props.$decoration};
  animation: ${fadeIn} 2s ease-in;
`;

const BigTitle = styled(Title)`
  font-size: 50px;
`;

const Wrapper = styled.section`
  padding: 2rem;
  border: 1px solid red;
`;

const BlueBorderWrapper = styled(Wrapper)<{ $shadow: boolean }>`
  border-color: ${(props) => props.theme.colors.primary};
  ${(props) => props.$shadow && boxShadowMixin};
`;

export default function App() {
  return (
    <>
      <BlueBorderWrapper $shadow={true}>
        <Title $color="#00ff00" $decoration="line-through" as="p">
          App Component
        </Title>
        <BigTitle $color="#0000ff" $decoration="underline">
          App Component
        </BigTitle>
      </BlueBorderWrapper>
    </>
  );
}

border-color: ${(props) => props.theme.colors.primary};

적용하는 부분에서 에러가 발생합니다.

Property 'colors' does not exist on type 'DefaultTheme'.

혹시 문제가 있는걸까요?

// src/styled.d.ts
import "styled-components";

declare module "styled-components" {
  export interface DefaultTheme {
    colors: {
      primary: string;
      secondary: string;
    };
    fontSizes: {
      normal: string;
      large: string;
    };
  }
}

// main.tsx
import { DefaultTheme } from "styled-components";

const theme: DefaultTheme = {
  colors: {
    primary: "red",
    secondary: "gray", // ← "#gray"도 오타이니 이 기회에 수정
  },
  fontSizes: {
    normal: "16px",
    large: "20px",
  },
};