{"id":13990054,"url":"https://github.com/pluralsight/react-styleable","last_synced_at":"2026-02-28T08:30:21.661Z","repository":{"id":34151099,"uuid":"37989340","full_name":"pluralsight/react-styleable","owner":"pluralsight","description":"React Component for portable styles","archived":true,"fork":false,"pushed_at":"2023-07-19T01:14:46.000Z","size":1991,"stargazers_count":220,"open_issues_count":25,"forks_count":21,"subscribers_count":12,"default_branch":"master","last_synced_at":"2025-01-31T12:48:58.842Z","etag":null,"topics":["css-modules","react"],"latest_commit_sha":null,"homepage":"","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/pluralsight.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,"governance":null,"roadmap":null,"authors":null}},"created_at":"2015-06-24T14:26:06.000Z","updated_at":"2024-11-15T19:39:34.000Z","dependencies_parsed_at":"2024-01-15T16:52:41.000Z","dependency_job_id":null,"html_url":"https://github.com/pluralsight/react-styleable","commit_stats":{"total_commits":103,"total_committers":9,"mean_commits":"11.444444444444445","dds":0.2912621359223301,"last_synced_commit":"60be8d24f000a8da692eb2633826370a31eb075a"},"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pluralsight%2Freact-styleable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pluralsight%2Freact-styleable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pluralsight%2Freact-styleable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pluralsight%2Freact-styleable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pluralsight","download_url":"https://codeload.github.com/pluralsight/react-styleable/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239872530,"owners_count":19711083,"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-modules","react"],"created_at":"2024-08-09T13:02:18.997Z","updated_at":"2026-02-28T08:30:21.549Z","avatar_url":"https://github.com/pluralsight.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# react-styleable\n\nConsistent, easy overrides for CSS Modules in React Components\n\n## Install\n\n```\nnpm install react-styleable --save-dev\n```\n\n## Usage\n\n### Styles in Props\n\n`react-styleable` makes your styles from your CSS modules available on `props.css`.\n\nWrite your stylesheet with all the perks of [css modules](https://github.com/css-modules/css-modules).  For example:\n\n```css\n.list {\n  list-style: none;\n  padding-left: 0;\n  margin: 10px;\n}\n.item {\n  outline: 1px solid red;\n  padding: 10px;\n}\n```\n\nThen in your reusable component, wrap your React.Component in `react-styleable`'s higher-order component.\n\n```js\nimport styleable from 'react-styleable'\n\nimport css from './my-list.css'\n\nclass MyList extends React.Component {\n  renderItem(item, i) {\n    return (\n      \u003cli key={i} className={this.props.css.item}\u003e{item}\u003c/li\u003e\n    )\n  }\n  renderList(items) {\n    return items.map(this.renderItem)\n  }\n  render() {\n    return (\n      \u003cul className={this.props.css.list}\u003e\n        {this.renderList(this.props.items)}\n      \u003c/ul\u003e\n    )\n  }\n}\n\nexport default styleable(css)(MyList)\n```\n\nUsage as a decorator is also nice:\n\n```js\n@styleable(css)\nclass MyList extends React.Component { /* ... */ }\n```\n\nYour `MyList` component is now styled and ready to display!\n\n### Overriding Component Styles\n\nThis is the big payoff.\n\nIf you want to override this component's styles as the consumer, you can easily do so, through the same, consistent interface.  First, define a new stylesheet:\n\n```css\n.item {\n  outline: 1px solid blue;\n}\n```\n\nAnd use it to render `MyList` again, passing your new stylesheet via the `props.css` prop:\n\n```js\nimport MyList from './my-list'\n\nimport css from './client.css'\n\nReact.render(\u003cMyList css={css} /\u003e, document.getElementById('app'))\n```\n\nNow the `.item`s outline will be blue instead of the original red.\n\n### Composing Component Styles\n\nIf instead of just overriding the styles, you wanted to add to them with style composition, you can do that as well.\n\nOne method is via CSS modules' [`composes`](https://github.com/css-modules/css-modules#composition) keyword.  In your new stylesheet:\n\n```css\n.item {\n  composes: item from \"./my-list.css\";\n  background: pink;\n}\n```\n\nNow the original red outline will remain and a pink background will be present as well.  This is the most surefire way to compose styles because it allows you to guarantee the order of the cascade.  \n\nBut it has the downside of having to locate the original stylesheet location.\n\nIf you have enough assurances on the cascade order and selector specificity, all potential concerns, you can use the `compose` api via the `react-styleable` to accomplish the same thing (in `react-styleable@3.1.0`):\n\n```js\nimport MyList from './my-list'\n\nimport css from './client.css'\n\nReact.render(\u003cMyList css={{ compose: css }} /\u003e, document.getElementById('app'))\n```\n\nStyled. Portable. Easily overridden.  So, so good.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpluralsight%2Freact-styleable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpluralsight%2Freact-styleable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpluralsight%2Freact-styleable/lists"}