{"id":13572882,"url":"https://github.com/cssinjs/styled-jss","last_synced_at":"2026-01-08T21:04:53.010Z","repository":{"id":57286335,"uuid":"88740773","full_name":"cssinjs/styled-jss","owner":"cssinjs","description":"Styled Components on top of JSS.","archived":false,"fork":false,"pushed_at":"2018-12-31T10:10:52.000Z","size":297,"stargazers_count":217,"open_issues_count":20,"forks_count":25,"subscribers_count":13,"default_branch":"master","last_synced_at":"2024-05-11T20:33:33.081Z","etag":null,"topics":["css","js","jss","react","styled-components","styled-jss","stylesheets"],"latest_commit_sha":null,"homepage":"http://cssinjs.org/styled-jss","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cssinjs.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-04-19T12:12:18.000Z","updated_at":"2023-06-07T09:10:06.000Z","dependencies_parsed_at":"2022-08-30T00:40:35.440Z","dependency_job_id":null,"html_url":"https://github.com/cssinjs/styled-jss","commit_stats":null,"previous_names":["lttb/jss-styled"],"tags_count":28,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cssinjs%2Fstyled-jss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cssinjs%2Fstyled-jss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cssinjs%2Fstyled-jss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cssinjs%2Fstyled-jss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cssinjs","download_url":"https://codeload.github.com/cssinjs/styled-jss/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247411235,"owners_count":20934653,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","js","jss","react","styled-components","styled-jss","stylesheets"],"created_at":"2024-08-01T15:00:23.081Z","updated_at":"2026-01-08T21:04:52.944Z","avatar_url":"https://github.com/cssinjs.png","language":"JavaScript","readme":"\u003ca href=\"https://github.com/cssinjs/styled-jss\"\u003e\n  \u003cimg alt=\"styled-jss\" src=\"https://github.com/cssinjs/logo/blob/master/styled-jss-logo.png?raw=true\" height=\"150px\" /\u003e\n\u003c/a\u003e\n\n# Styled Components on top of JSS\n\n[![Travis branch](https://img.shields.io/travis/cssinjs/styled-jss/master.svg?style=flat)](https://travis-ci.org/cssinjs/styled-jss)\n[![Coverage Status branch](https://img.shields.io/coveralls/cssinjs/styled-jss/master.svg?style=flat)](https://img.shields.io/coveralls/cssinjs/styled-jss/master.svg?branch=master)\n[![npm version](https://img.shields.io/npm/v/styled-jss.svg?style=flat)](https://www.npmjs.com/package/styled-jss)\n[![npm license](https://img.shields.io/npm/l/styled-jss.svg?style=flat)](https://www.npmjs.com/package/styled-jss)\n\nStyled-JSS implements a styled-primitives interface on top of [JSS](https://github.com/cssinjs/jss). Its API is similar to styled-components but thanks to the JSS core, it supports all features and plugins JSS does. For e.g. you can use full [JSON Syntax](https://github.com/cssinjs/jss/blob/master/docs/json-api.md) inside.\n\nTry it out on [playground](https://codesandbox.io/s/xl89zx8zz4).\n\n## Default styled function\n\n```js\nimport styled from 'styled-jss'\n\nconst Button = styled('button')({\n  fontSize: 12,\n  color: (props) =\u003e props.theme.textColor\n})\n\n// You can also use curried interface this way.\nconst div = styled('div')\n\nconst Container = div({\n  padding: 20\n})\n\n// Composition.\nconst PrimaryButton = styled(Button)({\n  color: 'red'\n})\n\n// Composition with unstyled React Components too.\nconst Button = styled(UnstyledButton)({\n  color: 'blue'\n})\n\n// Component Selectors.\nconst ButtonContainer = styled(Container)({\n  [`\u0026 ${PrimaryButton}`]: {\n    color: 'green'\n  }\n})\n```\n\n## Theming\n\n`styled-jss` has out of the box support for theme customization with the unified [theming](https://github.com/cssinjs/theming) package.\n\n```js\nimport styled, {ThemeProvider} from 'styled-jss'\n\nconst Button = styled('button')(({margin, theme}) =\u003e ({\n  margin,\n  color: theme.color,\n  backgroundColor: theme.backgroundColor,\n}))\n\nconst themes = {\n  light: {\n    color: 'black',\n    backgroundColor: 'yellow',\n  },\n}\n\nconst App = () =\u003e (\n  \u003cThemeProvider theme={themes.light}\u003e\n    \u003cButton margin={20}\u003eThis is themed Button\u003c/Button\u003e\n  \u003c/ThemeProvider\u003e\n)\n\nexport default App\n```\n\n## Composable styles\n\nExample on the [CodeSandbox](https://codesandbox.io/s/y0162p38lv)\n\nYou can compose your style-objects and style-functions.\n\nLet's say this is our **mods.js**:\n\n```js\nexport const theme = ({ theme }) =\u003e ({\n  color: theme.colors.primary,\n  backgroundColor: theme.colors.secondary,\n})\n\nexport const font = ({ bold }) =\u003e ({\n  font: {\n    weight: bold ? 'bold' : 'normal',\n    family: 'Arial',\n  },\n})\n\nexport const size = ({ size = 'm' }) =\u003e ({\n  s: {\n    fontSize: 12,\n    lineHeight: 1.2,\n  },\n  m: {\n    fontSize: 16,\n    lineHeight: 1.5\n  }\n})[size]\n\nexport const rounded = ({ rounded }) =\u003e rounded \u0026\u0026 { borderRadius: 5 }\n```\n\nNow we can mix them to our **Button** Component:\n\n```js\nimport styled from 'styled-jss'\nimport {theme, font, size, rounded} from 'mods'\n\nconst Button = styled('button')(\n  {\n    border: 0,\n    padding: [5, 10],\n    display: 'inline-block',\n  },\n  theme,\n  font,\n  size,\n  rounded,\n)\n\nexport default Button\n```\n\nAnd Usage:\n\n```js\nimport {ThemeProvider} from 'styled-jss'\nimport Button from './components/Button'\n\nconst theme = {\n  dark: {\n    colors: {\n      primary: 'white',\n      secondary: 'purple'\n    }\n  }\n}\n\nexport default () =\u003e (\n  \u003cThemeProvider theme={theme.dark}\u003e\n    \u003cButton\u003enormal button\u003c/Button\u003e\n    \u003cButton bold\u003ebold button\u003c/Button\u003e\n    \u003cButton size=\"s\"\u003esmall button\u003c/Button\u003e\n    \u003cButton rounded\u003erounded button\u003c/Button\u003e\n  \u003c/ThemeProvider\u003e\n)\n```\n\n## Base Style Sheet\n\nUsing base Style Sheet we can reuse classes in the render function and inside of a styled component.\n\n```js\nimport { Styled, injectStyled } from 'styled-jss'\n\n// Base styles, like a regular jss object.\nconst styled = Styled({\n  root: {\n    margin: 10,\n    '\u0026 $baseButton': {\n      fontSize: 16\n    }\n  },\n  baseButton: {\n    padding: 10,\n    '\u0026 + \u0026': {\n      marginLeft: 10\n    }\n  }\n})\n\nconst NormalButton = styled('button')({\n  composes: '$baseButton',\n  border: [1, 'solid', 'grey'],\n  color: 'black'\n})\n\n// Composition - same way.\nconst PrimaryButton = styled(NormalButton)({\n  color: 'red'\n})\n\n// One can use classes AND styled primitives.\nconst MyComponent = ({classes}) =\u003e (\n  \u003cdiv className={classes.root}\u003e\n    \u003cNormalButton\u003enormal button\u003c/NormalButton\u003e\n    \u003cPrimaryButton\u003eprimary button\u003c/PrimaryButton\u003e\n  \u003c/div\u003e\n)\n\nconst MyStyledComponent = injectStyled(styled)(MyComponent)\n```\n\n## Custom JSS setup\n\nStyled-JSS uses [jss-preset-default](https://github.com/cssinjs/jss/tree/master/packages/jss-preset-default) by default. You can require `createStyled` function and provide your custom JSS instance.\n\n```js\nimport { create as createJss } from 'jss'\nimport vendorPrefixer from 'jss-vendor-prefixer'\nimport createStyled from 'styled-jss/createStyled'\n\nconst jss = createJss()\njss.use(vendorPrefixer())\n\n// Create a custom Styled function, that allows to set BaseStyles.\nexport const Styled = createStyled(jss)\n\n// Create a custom styled function that allows to create styled components.\nconst styled = Styled()\n\nexport default styled\n```\n\n## Install\n\n```sh\nnpm install --save styled-jss\n```\n\nInstall peer dependencies `react` and `react-dom` in your project.\n\n## License\n\nMIT\n","funding_links":[],"categories":["库","JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcssinjs%2Fstyled-jss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcssinjs%2Fstyled-jss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcssinjs%2Fstyled-jss/lists"}