styled-components VS emotion

Compare styled-components vs emotion and see what are their differences.

styled-components

Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress πŸ’… (by styled-components)

emotion

πŸ‘©β€πŸŽ€ CSS-in-JS library designed for high performance style composition (by emotion-js)
Our great sponsors
  • OPS - Build and Run Open Source Unikernels
  • SonarLint - Deliver Cleaner and Safer Code - Right in Your IDE of Choice!
  • Scout APM - Less time debugging, more time building
styled-components emotion
96 20
35,677 14,306
1.1% 1.8%
8.0 8.2
19 days ago 1 day ago
TypeScript JavaScript
MIT License MIT License
The number of mentions indicates the total number of mentions that we've tracked plus the number of user suggested alternatives.
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.

styled-components

Posts with mentions or reviews of styled-components. We have used some of these posts to build our list of alternatives and similar projects. The last one was on 2022-01-07.
  • πŸ–‹Adding Fonts in Next.js (local fonts along with styled components)
    3 projects | dev.to | 7 Jan 2022
  • Lessons Learned from AOC 2021
    7 projects | dev.to | 31 Dec 2021
    As already mentioned in the previous section, a certain flavor of functional programming can be quite elegant in JavaScript. The simplicity of the object model makes it very convenient to organize and operate on data. Dynamic typing and type coercion allows you to take certain shortcuts (unless you are trying to sort a list of numbers...). Use the strengths of whatever language you are using to your advantage. It is good to push the boundaries of the language to create new things. For example, styled components and GraphQL have normalized the use of tagged template literals for domain specific languages (DSLs). But in general, you'll have a much better time working with the grain of the language than against it.
  • Making an AeroPress Tracking App
    3 projects | dev.to | 27 Dec 2021
    I want to be clear that I am far from a TailwindCSS hater. I think the framework is awesome and I am looking forward to its future in the space. I definitely feel like I need more time with it and more experience working with it, but right now I'm more excited about Styled Components (which I've taken a love to from Josh W. Comeau's CSS for JavaScript Developers Course) and also Vanilla Extract which I plan to look into more for future projects. With other tools like Chakra UI also looming over my shoulder competing for my headspace with styling, these small frustrations from Tailwind keep adding up and I'm not sure if I'll be using it for my own personal projects anymore.
  • Reusable components (e.g. button) - one Button.tsx that takes props or multiple such as PrimaryButton, PrimaryButtonWithIcon etc?
    1 project | reddit.com/r/nextjs | 25 Dec 2021
    You could checkout styled-components which allows you to make components and add css to them in javascript. With this, you can create variants, and wherever you need a specific variant, just create a prop called variant, and pass in which specific style of component you need. Note you do need the babel-plugin-styled-components for it to work in nextjs
  • Random letters go brrr
    1 project | reddit.com/r/ProgrammerHumor | 24 Dec 2021
    Yo it dis style components (and they rock)
  • Stylelint - O que Γ© isso?
    2 projects | dev.to | 21 Dec 2021
  • Responsive CSS border radius with the Fab Four technique
    1 project | dev.to | 21 Dec 2021
    Let's face the fact that this calculation is not straightforward and hard to read, even when you are familiar with the technique. Luckily for us, we can extract SASS mixins, or utility functions for various CSS-in-JS libraries (like styled-components).
  • How to create a beautiful toast message component using React and Styled Components?
    3 projects | dev.to | 19 Dec 2021
    styled-components for styling needs
    3 projects | dev.to | 19 Dec 2021
    This article aims to explain how we could use react-hot-toast and styled-components to create some beautiful-looking toast messages πŸ˜‰
  • SCSS nesting doesn't work
    2 projects | reddit.com/r/Frontend | 14 Dec 2021
    No, you're right about using @use and @forward rather than @import. These days I generally work with CSS in JS using something like styled-components, but when I do work on static sites, I funnily enough do use a rather nice gulp build I've put together over the years, that leverages browserstack and pug, so @import works for me... but I should really update my boilerplate.

emotion

Posts with mentions or reviews of emotion. We have used some of these posts to build our list of alternatives and similar projects. The last one was on 2021-12-29.
  • How to build UI elements using CSS pseudo elements
    2 projects | dev.to | 29 Dec 2021
    I'm using React for making the UI element dynamic so that we can easily change the status of a step from pending to complete. Also using the emotion library for writing css styles with JavaScript because it's efficient and fun! We can achieve the same result using CSS (SCSS, SASS).
  • Next.Js + MUI v5 tutorial
    4 projects | dev.to | 20 Dec 2021
    The default style library used for generating CSS styles for MUI components is emotion.
  • The React roadmap for beginners you never knew you needed.
    42 projects | dev.to | 23 Nov 2021
    Emotion
  • The Mysterious Case of Emotion and "exports is not defined"
    2 projects | dev.to | 3 Nov 2021
    That sent me on a lengthy wild goose chase. Stack Overflow had one question with no accepted answer. Babel was the primary suspect so I tried reordering all my presets and then upgrading to the latest version. I poked around in the Webpack config. The Emotion repo’s issues page wasn’t any help. I tried completely switching up our Emotion implementation but that created a whole new set of problems.
  • How to Add An RSS Feed to a NextJS Blog
    3 projects | dev.to | 17 Oct 2021
    My site uses Chakra UI for theming, which uses Emotion -- a CSS-in-JS library -- under the hood. Emotion will happily render tons of tags when statically generating HTML from your React components. For most use cases where you render React on the server (statically or not), this is desirable. In the case of RSS/Atom feeds, this is pretty useless.

    Solution

    The solution here is to strip all the and tags from the generated HTML. Rather than summoning The One whose Name cannot be expressed in the Basic Multilingual Plane by trying to use regex here, I found this library to help me with this task:

    const cleanHtmlContent = stripHtml(htmlContent, {
        onlyStripTags: ['script', 'style'],
        stripTogetherWithTheirContents: ['script', 'style'],
    }).result;
    
    Enter fullscreen mode Exit fullscreen mode

    The end result

    I now have serve RSS, Atom and a JSON Feed for your reading pleasure. Most of the relevant code can be found here

    Future plans

    At some point I want to diversify my writing output by not only writing about tech. And even within the topic of tech there are many sub-topics I could write about, not all of which are equally interesting to every reader (all 5 of them, including my mom πŸ‘©β€πŸ‘¦). I'm planning to introduce tags to allow filtering content once I have enough of it.

    Once I have tags, I would like to start supporting dynamic feeds so readers can subscribe only to the stuff they actually want to read. I imagine building an endpoint like this:

    /feeds/by-tags.xml?tags=tag1,tag2
    
    Enter fullscreen mode Exit fullscreen mode

    I'm curious if others are doing this!

  • A 55% Performance Improvement Upgrading Material-UI from v4 to v5
    1 project | dev.to | 14 Oct 2021
    This was the biggest chunk of work for us. We've gone through a styling change before with Material-UI when they moved from inline styles to JSS, but this time Material-UI 5 moves away from JSS as the default styling solution to emotion. We've been relying heavily on JSS for the majority of our components, so lots of them looked something like this...
  • Using Nx Workspace generators to scaffold new blog posts
    7 projects | dev.to | 12 Oct 2021
    "style": { "description": "The file extension to be used for style files.", "type": "string", "alias": "s", "default": "css", "x-prompt": { "message": "Which stylesheet format would you like to use?", "type": "list", "items": [ { "value": "css", "label": "CSS" }, { "value": "scss", "label": "SASS(.scss) [ http://sass-lang.com ]" }, { "value": "styl", "label": "Stylus(.styl) [ http://stylus-lang.com ]" }, { "value": "less", "label": "LESS [ http://lesscss.org ]" }, { "value": "styled-components", "label": "styled-components [ https://styled-components.com ]" }, { "value": "@emotion/styled", "label": "emotion [ https://emotion.sh ]" }, { "value": "styled-jsx", "label": "styled-jsx [ https://www.npmjs.com/package/styled-jsx ]" } ] } }, ...
  • Mantine 3.0 is out – 120+ hooks and components with dark theme support
    4 projects | reddit.com/r/reactjs | 11 Oct 2021
    Mantine no longer depends on react-jss, we’ve migrated everything to emotion – based on our internal tests styles management became ~ 40% more performant and contribute ~15% less to bundle size (see comment if you want to find out more)
  • Are junior web dev positions dead?
    1 project | reddit.com/r/cscareerquestions | 3 Oct 2021
  • I created a blogging platform
    4 projects | reddit.com/r/webdev | 7 Aug 2021
    Ahh, I see. Yeah, I'm using emotion for styling so saying something like:

What are some alternatives?

When comparing styled-components and emotion you can also consider the following projects:

styled-jsx - Full CSS support for JSX without compromises

JSS - JSS is an authoring tool for CSS which uses JavaScript as a host language.

styletron - :zap: Toolkit for component-oriented styling

PostCSS - Transforming styles with JS plugins

Tailwind CSS - A utility-first CSS framework for rapid UI development.

chakra-ui - ⚑️ Simple, Modular & Accessible UI Components for your React Applications

linaria - Zero-runtime CSS in JS library

material-ui - MUI (formerly Material-UI) is the React UI library you always wanted. Follow your own design system, or start with Material Design.

Aphrodite - Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation