\n );\n}\n```\n\n### css prop\n\nstyled 컴포넌트에 객체 형태로 추가 스타일을 적용할 수 있는 속성이에요. 별도의 컴포넌트를 새로 만들지 않고도 클래스 기반으로 스타일을 동적으로 확장할 수 있어요. 중첩 선택자와 테마 사용도 지원해요.\n\n```tsx\nimport styled from 'basic-styled';\n\n// 기본 컴포넌트 정의\nconst Box = styled.div`\n padding: 16px;\n border-radius: 4px;\n`;\n\nfunction App() {\n const theme = useTheme();\n \n return (\n <>\n {/* 기본 스타일만 적용 */}\n 기본 박스\n \n {/* css prop으로 추가 스타일 적용 */}\n \n 파란색 박스\n \n \n {/* 중첩 선택자 사용 */}\n p': {\n fontSize: '14px',\n marginTop: '8px'\n }\n }}>\n
마우스를 올리면 그림자 효과가 생겨요
\n \n \n {/* 함수형 스타일도 지원 */}\n ({\n backgroundColor: theme.palette.secondary,\n padding: theme.spacing.medium,\n color: 'white'\n })}>\n 테마를 활용한 동적 스타일\n \n \n );\n}\n```\n\n### configureStyled\n\n라이브러리의 전역 설정을 구성하는 함수예요. 테마 설정과 클래스명의 접두사를 변경할 수 있어요.\n\n```tsx\n// theme.ts\nexport const theme = {\n palette: {\n primary: '#007bff',\n }\n};\n\n// app/layout.tsx\nimport { PropsWithChildren } from 'react';\nimport configureStyled from \"basic-styled/setup/configureStyled\";\nimport { theme } from '../theme';\n\nconfigureStyled({\n prefix: 'basic-styled', // 접두사 (기본값: 'basic-styled')\n theme // 전역 테마 객체\n});\n\nexport default function RootLayout({ children }: PropsWithChildren) {\n return (\n \n \n {children}\n \n \n );\n}\n```\n\n### ResetStyle\n\nCSS 리셋 스타일을 적용하는 컴포넌트예요. 브라우저 간 일관된 스타일링을 위해 기본 스타일을 초기화해요.\n\n```tsx\nimport ThemeProvider from 'basic-styled/setup/ThemeProvider';\nimport ResetStyle from 'basic-styled/setup/ResetStyle';\nimport { theme } from './theme';\n\nfunction App() {\n return (\n \n \n {/* 애플리케이션 컴포넌트 */}\n \n );\n}\n```\n\n### GlobalStyle\n\n전역 스타일을 적용하는 방법이에요. 폰트, 색상 등 전체 애플리케이션에 적용될 스타일을 정의할 수 있어요.\n\n```tsx\nimport styled from \"basic-styled\";\n\nfunction GlobalStyle() {\n return ;\n}\n\nconst StyledGlobal = styled.style`\n html,\n body {\n height: 100%;\n font-family: 'Noto Sans KR', sans-serif;\n }\n \n #root {\n min-height: 100%;\n }\n \n * {\n box-sizing: border-box;\n }\n`;\n```\n\n## Next.js 예제\n\n```tsx\n// theme.ts\nexport const theme = {\n palette: {\n primary: '#007bff',\n }\n};\n\n// app/layout.tsx\nimport { PropsWithChildren } from 'react';\nimport configureStyled from \"basic-styled/setup/configureStyled\";\nimport { theme } from '../theme';\nimport Providers from \"./providers\";\n\nconfigureStyled({\n prefix: 'basic-styled',\n theme\n});\n\nexport default function RootLayout({ children }: PropsWithChildren) {\n return (\n \n \n \n {children}\n \n \n \n );\n}\n```\n\n```tsx\n// app/providers.tsx\n'use client';\n\nimport { PropsWithChildren } from 'react';\nimport ThemeProvider from 'basic-styled/setup/ThemeProvider';\nimport { theme } from '../theme';\n\nexport default function Providers({ children }: PropsWithChildren) {\n return (\n \n {children}\n \n );\n}\n```\n\n## License\nMIT","readmeFilename":"README.md"}
![\"basic-styled](\"https://img.shields.io/npm/v/basic-styled?style=flat-square&labelColor=%2360758B&color=%23004ECC\")
\n ![\"license\"](\"https://img.shields.io/github/license/kimjh96/basic-styled?style=flat-square\")
\n