{"id":15363849,"url":"https://github.com/chentsulin/styled-css-modules-component","last_synced_at":"2025-10-15T04:35:07.521Z","repository":{"id":57373300,"uuid":"80453953","full_name":"chentsulin/styled-css-modules-component","owner":"chentsulin","description":"Build styled component with css-modules","archived":false,"fork":false,"pushed_at":"2017-03-21T02:45:29.000Z","size":106,"stargazers_count":15,"open_issues_count":1,"forks_count":1,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-06T22:44:01.592Z","etag":null,"topics":["component","css-modules","react","style","styled-components"],"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/chentsulin.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-01-30T19:14:43.000Z","updated_at":"2021-06-05T04:23:28.000Z","dependencies_parsed_at":"2022-08-29T14:42:36.486Z","dependency_job_id":null,"html_url":"https://github.com/chentsulin/styled-css-modules-component","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chentsulin%2Fstyled-css-modules-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chentsulin%2Fstyled-css-modules-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chentsulin%2Fstyled-css-modules-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chentsulin%2Fstyled-css-modules-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chentsulin","download_url":"https://codeload.github.com/chentsulin/styled-css-modules-component/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248571887,"owners_count":21126522,"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":["component","css-modules","react","style","styled-components"],"created_at":"2024-10-01T13:08:45.731Z","updated_at":"2025-10-15T04:35:02.451Z","avatar_url":"https://github.com/chentsulin.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# styled-css-modules-component\n\n[![NPM version][npm-image]][npm-url]\n[![Build Status][travis-image]][travis-url]\n[![Dependency Status][david_img]][david_site]\n\n\u003e Build styled component with css-modules\n\n`styled-component` forces developers use clearer way to add styles to the components which looks great to me, but there are still some difficult unsolved issues in CSS-in-JS area, even after `radium`, `aphrodite` and a lot of libraries involved.\n\n`css-modules` is a good choice for getting modularization without being as cutting-edge as the CSS-in-JS approaches. You can just write css and get full superpower from PostCSS ecosystem!\n\n## Install\n\n```sh\n$ npm install styled-css-modules-component\n```\n\n\u003e Note: You have to setup your own css-modules environment.\n\n## Usage\n\n### Basic\n\n`styles.css`:\n\n```css\n.title {\n  font-size: 1.5em;\n  text-align: center;\n  color: palevioletred;\n}\n\n.wrapper {\n  padding: 4em;\n  background: papayawhip;\n}\n```\n\nThis creates two react components, `\u003cTitle\u003e` and `\u003cWrapper\u003e`:\n\n```js\nimport React from 'react';\nimport styled from 'styled-css-module-components';\n\nimport styles from './styles.css';\n\n// Create a \u003cTitle\u003e react component that renders an \u003ch1\u003e which is\n// centered, palevioletred and sized at 1.5em\nconst Title = styled.h1(styles.title);\n\n// Create a \u003cWrapper\u003e react component that renders a \u003csection\u003e with\n// some padding and a papayawhip background\nconst Wrapper = styled.section(styles.wrapper);\n```\n\nYou render them like so:\n\n```jsx\n// Use them like any other React component – except they're styled!\n\u003cWrapper\u003e\n  \u003cTitle\u003eHello World, this is my first styled css modules component!\u003c/Title\u003e\n\u003c/Wrapper\u003e\n```\n\n![screencapture-localhost-3000-1486314996688](https://cloud.githubusercontent.com/assets/3382565/22628156/1581950e-ec0a-11e6-9a15-4ed2b7d3d816.png)\n\nCheckout full examples [here](https://github.com/chentsulin/styled-css-modules-component/blob/master/examples/basic/components/App.js).\n\n\n### Passed props\n\n`styles.css`:\n\n```css\n.input {\n  font-size: 1.25em;\n  padding: 0.5em;\n  margin: 0.5em;\n  color: palevioletred;\n  background: papayawhip;\n  border: none;\n  border-radius: 3px;\n}\n```\n\nStyled components pass on all their props. This is a styled `\u003cinput\u003e`:\n\n```js\nimport React from 'react';\nimport styled from 'styled-css-modules-components';\n\nimport styles from './styles.css';\n\n// Create an \u003cInput\u003e component that'll render an \u003cinput\u003e tag with some styles\nconst Input = styled.input(styles.input);\n```\n\nYou can just pass a `placeholder` prop into the `styled-css-modules-component`. It will pass it on to the DOM node like any other react component:\n\n```jsx\n// Render a styled input with a placeholder of \"@chentsulin\"\n\u003cInput placeholder=\"@chentsulin\" type=\"text\" /\u003e\n```\n\n![2017-02-06 1 23 26](https://cloud.githubusercontent.com/assets/3382565/22628206/f20db8fe-ec0a-11e6-9980-36a6090cb3e1.png)\n\nCheckout full examples [here](https://github.com/chentsulin/styled-css-modules-component/blob/master/examples/passed-props/components/App.js).\n\n\n## Third-party components\n\n`styles.css`:\n\n```css\n.link {\n  color: palevioletred;\n  display: block;\n  margin: 0.5em 0;\n  font-family: Helvetica, Arial, sans-serif;\n}\n```\n\nThe above also works perfectly for styling third-party components, like a `react-router` `\u003cLink /\u003e`!\n\n```js\nimport styled from 'styled-css-modules-components';\nimport { Link } from 'react-router';\n\nconst StyledLink = styled(Link)(styles.link);\n```\n\n```jsx\n\u003cLink to=\"/\"\u003eStandard, unstyled Link\u003c/Link\u003e\n\u003cStyledLink to=\"/\"\u003eThis Link is styled!\u003c/StyledLink\u003e\n```\n\n![2017-02-07 1 50 27](https://cloud.githubusercontent.com/assets/3382565/22679409/e86ab850-ed3c-11e6-81cf-3d06dfb36aab.png)\n\nCheckout full examples [here](https://github.com/chentsulin/styled-css-modules-component/blob/master/examples/third-party-components/components/App.js).\n\n\n## Animations\n\nDirectly supported by CSS.\n\n\n## Overriding component styles \u0026 Theming\n\nSee the long discusses at [css-modules #147](https://github.com/css-modules/css-modules/issues/147).\n\n\n## React Native\n\nNot supported.\n\n\n## Relevant Projects\n\n- [styled-component](https://github.com/styled-components/styled-components)\n- [css-literal-loader](https://github.com/4Catalyzer/css-literal-loader)\n\n\n## License\n\nMIT © [C.T. Lin](https://github.com/chentsulin/styled-css-modules-component)\n\n[npm-image]: https://badge.fury.io/js/styled-css-modules-component.svg\n[npm-url]: https://npmjs.org/package/styled-css-modules-component\n[travis-image]: https://travis-ci.org/chentsulin/styled-css-modules-component.svg\n[travis-url]: https://travis-ci.org/chentsulin/styled-css-modules-component\n[coveralls-image]: https://coveralls.io/repos/chentsulin/styled-css-modules-component/badge.svg?branch=master\u0026service=github\n[coveralls-url]: https://coveralls.io/r/chentsulin/styled-css-modules-component?branch=master\n[david_img]: https://david-dm.org/chentsulin/styled-css-modules-component.svg\n[david_site]: https://david-dm.org/chentsulin/styled-css-modules-component\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchentsulin%2Fstyled-css-modules-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchentsulin%2Fstyled-css-modules-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchentsulin%2Fstyled-css-modules-component/lists"}