[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-1188":3},{"id":4,"name":5,"fullName":6,"owner":5,"repo":5,"description":7,"homepage":8,"htmlUrl":9,"language":10,"languages":9,"totalLinesOfCode":9,"stars":11,"forks":12,"watchers":13,"openIssues":14,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":15,"stars7d":16,"stars30d":17,"stars90d":15,"forks30d":15,"starsTrendScore":18,"compositeScore":19,"rankGlobal":9,"rankLanguage":9,"license":20,"archived":21,"fork":21,"defaultBranch":22,"hasWiki":21,"hasPages":21,"topics":23,"createdAt":9,"pushedAt":9,"updatedAt":29,"readmeContent":30,"aiSummary":31,"trendingCount":15,"starSnapshotCount":15,"syncStatus":32,"lastSyncTime":33,"discoverSource":34},1188,"styled-components","styled-components\u002Fstyled-components","Fast, expressive styling for React. Server components, client components, streaming SSR, React Native—one API.","https:\u002F\u002Fstyled-components.com",null,"TypeScript",41056,2528,352,8,0,40,54,1,95.4,"MIT License",false,"main",[24,25,26,27,28,5],"css","css-in-js","react","reactnative","rsc","2026-06-12 04:00:08","\u003Cdiv align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Fstyled-components.com\">\n    \u003Cimg alt=\"styled-components\" src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Fstyled-components\u002Fbrand\u002Fmaster\u002Fstyled-components.png\" height=\"150px\" \u002F>\n  \u003C\u002Fa>\n\u003C\u002Fdiv>\n\n\u003Cbr \u002F>\n\n\u003Cdiv align=\"center\">\n  \u003Cstrong>Fast, expressive styling for React.\u003C\u002Fstrong>\n  \u003Cbr \u002F>\n  Server components, client components, streaming SSR, React Native—one API.\n  \u003Cbr \u002F>\n  \u003Cbr \u002F>\n  \u003Ca href=\"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fstyled-components\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdm\u002Fstyled-components.svg\" alt=\"npm downloads\">\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fbundlephobia.com\u002Fresult?p=styled-components\" title=\"styled-components latest minified+gzip size\">\u003Cimg src=\"https:\u002F\u002Fbadgen.net\u002Fbundlephobia\u002Fminzip\u002Fstyled-components\" alt=\"gzip size\">\u003C\u002Fa>\n\u003C\u002Fdiv>\n\n---\n\nstyled-components is largely maintained by one person. Please help fund the project for consistent long-term support and updates: [Open Collective](https:\u002F\u002Fopencollective.com\u002Fstyled-components)\n\n---\n\nStyle React components with real CSS, scoped automatically and delivered only when needed. No class name juggling, no separate files, no build step required.\n\n- **Works everywhere React runs.** Server components, client components, streaming SSR, and React Native—same API, automatic runtime detection.\n- **Full CSS, no compromises.** Media queries, pseudo-selectors, nesting, keyframes, global styles. If CSS supports it, so does styled-components.\n- **TypeScript-first.** Built-in types ship with the package. Props flow through to your styles with full inference—no `@types` install, no manual generics.\n- **\u003C13kB gzipped.** Small enough to disappear in your bundle. No build plugin required.\n\n## Install\n\n```sh\nnpm install styled-components\n```\n\n\u003Cdetails>\n\u003Csummary>pnpm \u002F yarn\u003C\u002Fsummary>\n\n```sh\npnpm add styled-components\n```\n\n```sh\nyarn add styled-components\n```\n\n\u003C\u002Fdetails>\n\n## Quick examples\n\n### Dynamic props\n\nVary styles based on component props. Prefix transient props with `$` to keep them off the DOM.\n\n```tsx\nimport styled from 'styled-components';\n\nconst Button = styled.button\u003C{ $primary?: boolean }>`\n  background: ${props => (props.$primary ? 'palevioletred' : 'white')};\n  color: ${props => (props.$primary ? 'white' : 'palevioletred')};\n  font-size: 1em;\n  padding: 0.25em 1em;\n  border: 2px solid palevioletred;\n  border-radius: 3px;\n`;\n\n\u003CButton>Normal\u003C\u002FButton>\n\u003CButton $primary>Primary\u003C\u002FButton>\n```\n\n### Extending styles\n\nBuild variants on top of existing styled components.\n\n```tsx\nconst TomatoButton = styled(Button)`\n  background: tomato;\n  color: white;\n  border-color: tomato;\n`;\n```\n\n### Polymorphic `as` prop\n\nSwap the rendered element without changing styles.\n\n```tsx\n\u002F\u002F Renders a \u003Ca> tag with Button styles\n\u003CButton as=\"a\" href=\"\u002Fhome\">Link Button\u003C\u002FButton>\n```\n\n### Pseudos and nesting\n\nUse `&` to reference the component's generated class name—works with pseudo-classes, pseudo-elements, and nested selectors.\n\n```tsx\nconst Input = styled.input`\n  border: 1px solid #ccc;\n  border-radius: 4px;\n  padding: 0.5em;\n\n  &:focus {\n    border-color: palevioletred;\n    outline: none;\n  }\n\n  &::placeholder {\n    color: #aaa;\n  }\n`;\n```\n\n### Animations\n\nDefine `@keyframes` once, reference them across components. Names are scoped automatically.\n\n```tsx\nimport styled, { keyframes } from 'styled-components';\n\nconst rotate = keyframes`\n  from { transform: rotate(0deg); }\n  to { transform: rotate(360deg); }\n`;\n\nconst Spinner = styled.div`\n  animation: ${rotate} 1s linear infinite;\n  width: 40px;\n  height: 40px;\n  border: 3px solid palevioletred;\n  border-top-color: transparent;\n  border-radius: 50%;\n`;\n```\n\n### Theming\n\nShare design tokens across your app via React context. Every styled component receives `props.theme`.\n\n```tsx\nimport styled, { ThemeProvider } from 'styled-components';\n\nconst theme = {\n  fg: 'palevioletred',\n  bg: 'white',\n};\n\nconst Card = styled.div`\n  background: ${props => props.theme.bg};\n  color: ${props => props.theme.fg};\n  padding: 2em;\n`;\n\n\u003CThemeProvider theme={theme}>\n  \u003CCard>Themed content\u003C\u002FCard>\n\u003C\u002FThemeProvider>\n```\n\n### RSC-compatible themes\n\n`createTheme` turns your tokens into CSS custom properties. Class name hashes stay stable across theme variants—no hydration mismatch when switching light\u002Fdark.\n\n```tsx\nimport styled, { createTheme, ThemeProvider } from 'styled-components';\n\nconst { theme, GlobalStyle: ThemeVars } = createTheme({\n  colors: {\n    fg: 'palevioletred',\n    bg: 'white',\n  },\n  space: {\n    md: '1rem',\n  },\n});\n\nconst Card = styled.div`\n  color: ${theme.colors.fg};       \u002F* var(--sc-colors-fg, palevioletred) *\u002F\n  background: ${theme.colors.bg};\n  padding: ${theme.space.md};\n`;\n\n\u002F\u002F Render \u003CThemeVars \u002F> at the root to emit the CSS variable declarations\n\u002F\u002F Pass the theme to ThemeProvider for stable hashes\n\u003CThemeProvider theme={theme}>\n  \u003CThemeVars \u002F>\n  \u003CCard>Token-driven content\u003C\u002FCard>\n\u003C\u002FThemeProvider>\n```\n\n### Shared styles with `css`\n\nExtract reusable style blocks to share across components or apply conditionally.\n\n```tsx\nimport styled, { css } from 'styled-components';\n\nconst truncate = css`\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n`;\n\nconst Label = styled.span`\n  ${truncate}\n  max-width: 200px;\n`;\n```\n\n### Styling third-party components\n\nWrap any component that accepts a `className` prop.\n\n```tsx\nimport styled from 'styled-components';\nimport { Link } from 'react-router-dom';\n\nconst StyledLink = styled(Link)`\n  color: palevioletred;\n  text-decoration: none;\n\n  &:hover {\n    text-decoration: underline;\n  }\n`;\n```\n\n### Global styles\n\nInject app-wide CSS like resets and font faces. Supports theming and dynamic updates.\n\n```tsx\nimport { createGlobalStyle } from 'styled-components';\n\nconst GlobalStyle = createGlobalStyle`\n  body {\n    margin: 0;\n    font-family: system-ui, sans-serif;\n  }\n`;\n\n\u002F\u002F Render \u003CGlobalStyle \u002F> at the root of your app\n```\n\n### Attrs\n\nSet default or static HTML attributes so consumers don't have to.\n\n```tsx\nconst PasswordInput = styled.input.attrs({\n  type: 'password',\n  placeholder: 'Enter password',\n})`\n  border: 1px solid #ccc;\n  padding: 0.5em;\n`;\n```\n\n## Documentation\n\n- [Getting started](https:\u002F\u002Fstyled-components.com\u002Fdocs\u002Fbasics)\n- [API reference](https:\u002F\u002Fstyled-components.com\u002Fdocs\u002Fapi)\n- [Server-side rendering](https:\u002F\u002Fstyled-components.com\u002Fdocs\u002Fadvanced#server-side-rendering)\n- [React Server Components](https:\u002F\u002Fstyled-components.com\u002Fdocs\u002Fadvanced#react-server-components)\n- [Theming](https:\u002F\u002Fstyled-components.com\u002Fdocs\u002Fadvanced#theming)\n- [React Native](https:\u002F\u002Fstyled-components.com\u002Fdocs\u002Fbasics#react-native)\n\n## Community\n\n[Contributing guidelines](.\u002FCONTRIBUTING.md) | [Code of Conduct](.\u002FCODE_OF_CONDUCT.md) | [awesome-styled-components](https:\u002F\u002Fgithub.com\u002Fstyled-components\u002Fawesome-styled-components)\n\n## Contributors\n\nThis project exists thanks to all the people who contribute.\n\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fstyled-components\u002Fstyled-components\u002Fgraphs\u002Fcontributors\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Fstyled-components\u002Fcontributors.svg?width=890\" \u002F>\u003C\u002Fa>\n\n## Backers\n\nThank you to all our backers! [[Become a backer](https:\u002F\u002Fopencollective.com\u002Fstyled-components#backer)]\n\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Fstyled-components#backers\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Fstyled-components\u002Fbackers.svg?width=890\">\u003C\u002Fa>\n\n## Sponsors\n\nSupport this project by becoming a sponsor. [[Become a sponsor](https:\u002F\u002Fopencollective.com\u002Fstyled-components#sponsor)]\n\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Fstyled-components#sponsors\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Fstyled-components\u002Fsponsors.svg?width=890\">\u003C\u002Fa>\n\n## Acknowledgements\n\nThis project builds on earlier work by Charlie Somerville, Nik Graf, Sunil Pai, Michael Chan, Andrey Popp, Jed Watson, and Andrey Sitnik. Special thanks to [@okonet](https:\u002F\u002Fgithub.com\u002Fokonet) for the logo.\n\n## License\n\nLicensed under the MIT License, Copyright © 2016-present styled-components contributors. See [LICENSE](.\u002FLICENSE) for details.\n","styled-components 是一个用于 React 的快速且富有表现力的样式解决方案。它支持服务器组件、客户端组件、流式 SSR 以及 React Native，提供统一的 API。核心功能包括使用真实的 CSS 进行样式设计，自动作用域管理，按需加载样式，无需处理类名或单独的样式文件。此外，它全面支持所有 CSS 特性，如媒体查询、伪选择器等，并且原生支持 TypeScript，具有良好的类型推断能力。其压缩后的大小不到 13kB，对项目打包体积影响极小。适用于任何需要在 React 或 React Native 中高效管理和应用样式的场景。",2,"2026-06-11 02:42:12","top_all"]