{"id":13441470,"url":"https://github.com/jsjoeio/styled-components-vs-emotion","last_synced_at":"2025-08-20T03:30:53.580Z","repository":{"id":97830416,"uuid":"140899117","full_name":"jsjoeio/styled-components-vs-emotion","owner":"jsjoeio","description":"a short doc comparing the popular CSS-in-JS libraries styled-components and emotion","archived":false,"fork":false,"pushed_at":"2020-09-05T21:32:57.000Z","size":24,"stargazers_count":250,"open_issues_count":2,"forks_count":17,"subscribers_count":8,"default_branch":"master","last_synced_at":"2024-12-09T14:15:24.425Z","etag":null,"topics":["comparison","css-in-js","emotion","react","styled-components"],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jsjoeio.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2018-07-13T22:48:57.000Z","updated_at":"2024-11-25T02:00:52.000Z","dependencies_parsed_at":"2023-05-03T05:31:20.955Z","dependency_job_id":null,"html_url":"https://github.com/jsjoeio/styled-components-vs-emotion","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsjoeio%2Fstyled-components-vs-emotion","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsjoeio%2Fstyled-components-vs-emotion/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsjoeio%2Fstyled-components-vs-emotion/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsjoeio%2Fstyled-components-vs-emotion/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jsjoeio","download_url":"https://codeload.github.com/jsjoeio/styled-components-vs-emotion/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230388131,"owners_count":18217755,"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":["comparison","css-in-js","emotion","react","styled-components"],"created_at":"2024-07-31T03:01:34.387Z","updated_at":"2024-12-19T06:09:10.706Z","avatar_url":"https://github.com/jsjoeio.png","language":null,"funding_links":[],"categories":["HarmonyOS","Others"],"sub_categories":["Windows Manager"],"readme":"# styled-components-vs-emotion\n_Last updated by @JuanmaMenendez on October 25th, 2019_\nA short doc comparing the popular CSS-in-JS libraries `styled-components` and `emotion`. For a more detailed comparison, see:\n* [this Spectrum thread](https://spectrum.chat/styled-components/general/styled-components-vs-emotion~47206c1b-a688-424e-9e96-6f265993587e) (Aug 2018 - Mar 2019)\n* [this shorter Frontity discussion](https://community.frontity.org/t/which-one-should-we-use-emotion-vs-styled-components/27)\n\n## Brief Description\n\n### [`styled-components`](https://www.styled-components.com/)\n\u003eUtilising tagged template literals (a recent addition to JavaScript) and the power of CSS, styled-components allows you to write actual CSS code to style your components. It also removes the mapping between components and styles – using components as a low-level styling construct could not be easier!\n\n### [`emotion`](https://emotion.sh/)\n\u003eEmotion is a performant and flexible CSS-in-JS library. Building on many other CSS-in-JS libraries, it allows you to style apps quickly with string or object styles. It has predictable composition to avoid specificity issues with CSS. With source maps and labels, Emotion has a great developer experience and great performance with heavy caching in production.\n\n### Functionality\nThe APIs of the two libraries have [converged over time](https://css-tricks.com/the-fragmented-but-evolving-state-of-css-in-js/). Both let you create a component with styling specified via CSS, or via object notation. (Styled Components added the latter capability [in May 2018](https://twitter.com/mxstbr/status/999918627997470724).)\n\n#### `styled-components`\n\n```javascript\n// CSS syntax in tagged template literal\nconst Title = styled.h1`\n  font-size: 1.5em;\n  text-align: center;\n  color: palevioletred;\n`\nrender(\u003cTitle\u003eHiya!\u003c/Title\u003e)\n\n// Object syntax\nconst button = styled.button({\n  fontSize: '1.5em',\n  textAlign: 'center',\n  color: 'palevioletred'\n});\n```\n\n#### `emotion`\n\n```javascript\n\n// CSS syntax in tagged template literal\n\nconst Button = styled.button`\n  padding: 32px;\n  background-color: hotpink;\n  font-size: 24px;\n  border-radius: 4px;\n  color: black;\n  font-weight: bold;\n  \u0026:hover {\n    color: white;\n  }\n`\n\nrender(\u003cButton\u003eHey! It works.\u003c/Button\u003e)\n\n---\n\nrender(\n  \u003ch1\n    className={css`\n      font-size: 1.5em;\n      text-align: center;\n      color: palevioletred;\n    `}\n  \u003e\n    Hiya!\n  \u003c/h1\u003e\n)\n\n// Object syntax\nconst titleStyles = css({\n  fontSize: '1.5em',\n  textAlign: 'center',\n  color: 'palevioletred'\n})\n\nrender(\u003ch1 className={titleStyles}\u003eHiya!\u003c/h1\u003e)\n\n```\n\n\n## Comparison\nHere's how the two libraries compare based on features and stats:\n\n### Features - at parity\nThis information was taken from the documentation websites.\n\nLibrary | Attaching Props? | Media Queries? | Global Styles? | Nested Selectors? | Server Side Rendering? | Theming Support? | Composition?\n--- | :---: | :---: | :---: | :---: | :---: | :---: | :---: |\n`styled-components` | Yes | Yes| Yes | Yes | Yes | Yes| Yes   \n`emotion` | Yes | Yes | Yes | Yes | Yes | Yes | Yes \n\n### Stats\nThese numbers were pulled on October 18th, 2019.\n\nLibrary | Creation Date | Last Updated (GitHub) | Size | Repo Stars | # of Contributors | Community Size (Spectrum)\n--- | --- | --- | --- | --- | --- | --- |\n[`styled-components`](https://github.com/styled-components/styled-components) | August 16th, 2016 | 8 days ago | ? 14.6kb ? | 26,197 | 252 | [10,113](https://spectrum.chat/styled-components)\n[`emotion`](https://github.com/emotion-js/emotion) | May 27th, 2017 | 6 days ago | ? 8.9kb ? | 9,118 | 184 | [479](https://spectrum.chat/emotion)\n\n### Worthy Notes\n\n* `emotion` is [ready](https://community.frontity.org/t/which-one-should-we-use-emotion-vs-styled-components/27/8) for [React Concurrent mode](https://dev.to/pomber/about-react-suspense-and-concurrent-mode-21aj) and it has a smaller bundle size\n- `emotion` [performed faster](https://github.com/A-gambit/CSS-IN-JS-Benchmarks/blob/master/RESULT.md) than `styled-components` back in March 12th when a comparison was done over all CSS-in-JS libraries. **However, maintainers of `styled-components` are actively improving performance and say [they are within 0.5-2x emotion's times](https://twitter.com/_philpl/status/1017312352641933317).**\n- Kent C. Dodds recommended `emotion` over `styled-components` in [this tweet](https://twitter.com/kentcdodds/status/994230853189320705) saying that it's smaller and faster. \n\n### Contributions\nIf you see a typo or something that is out-of-date or incorrect, please submit a PR and I will happily update this doc.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjsjoeio%2Fstyled-components-vs-emotion","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjsjoeio%2Fstyled-components-vs-emotion","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjsjoeio%2Fstyled-components-vs-emotion/lists"}