Comparing React's Styled-components, JSS, and Emotion: Which is

As a CTO, I am faced with the decision of choosing between three popular CSS-in-JS libraries:

  • jss
  • emotion
  • styled-component.

I will keep this question focused and avoid straying into subjective territory. If necessary, I will answer it myself by asking specific questions such as:

  • How do these libraries compile to external css, <style> tags, or style= attributes?
  • How can they seamlessly integrate with Create React App (CRA) without extensive adjustments or ejecting?
  • What is the OpenSource perspective on each one in terms of their age, community support, available plugins, and backing?
  • What performance considerations should be taken into account when evaluating these options?

I request that this question remains open, free from code-style opinions, and focuses on objective viewpoints.

cssreactjsstyled-componentsjssemotion

Answer №1

A concise explanation with room for more detail

  1. Utilizing CSS Template strings

SC interprets template strings using CSS during runtime. Emotion employs a babel plugin to optimize the parsed data for faster CSS rendering at runtime. JSS currently only offers support for basic template strings and utilizes objects in other cases (with plans to enhance support for template strings in the future)

  1. Dynamic style updates

When updating dynamic styles, SC and Emotion create new CSS rules while JSS modifies existing ones (not visible in the style tag but can be seen in the styles tab of dev tools): example

  1. Integration with React

SC is solely compatible with React. Emotion offers a syntax that can function without React (css``). JSS has distinct packages: jss (core, not reliant on React), react-jss (injects classes through HOC), styled-jss (similar to SC API).

  1. Support for Plugins

Presently, only JSS provides support for plugins.

  1. Static extraction capabilities

    Emotion exclusively supports complete static extraction, while JSS is in the process of implementing it. With JSS, static extraction can be achieved by storing styles in separate files (like something.styles.js) and extracting them via a webpack plugin (excluding dynamic values).

  2. Performance evaluation

  1. All three options generate actual CSS using a style tag.

Answer №2

After reading the previous answer, I must admit that I am not familiar with jss and emotion either. This could be due to the fact that they are not commonly used in conjunction with React. Personally, I have experience using traditional CSS, inline styling, CSS modules, and now the newest addition - Styled Components.

I find Styled Components to be convenient to work with. So, here are my responses to some of your questions:

  1. Check out the image below to see how it compiles with Styled Components, creating unique classes.
  2. No need to eject; simply import it from npm and start using it.
  3. It appears to be gaining popularity within the community. However, there are varying opinions regarding mixing styling and JS code within components.
  4. I haven't conducted a performance check, but it seems to run smoothly so far. =)

https://i.stack.imgur.com/yv1OW.png

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue: It is necessary to utilize the `@babel/plugin-transform-runtime` plugin if you have set `babelHelpers` to "runtime" when using npm link

My situation involves having two interconnected React libraries: project-ui and propert-utils. project-ui relies on propert-utils, and the latter is installed within the former. "devDependencies": { "@company/project-utils": "gi ...

javascriptnode.jsreactjsbabeljsrollup

Utilize React JS to send emails through contact forms

I am working with a contact form in react js and I'm having trouble sending an email to the inputted mail id. As a newcomer to react js, I would appreciate some guidance on how to achieve this using the code provided below. The contact form requires e ...

reactjsemailnodemailer

Utilizing the Public Directory in Vite Compilation

One issue I encountered in my project with Vite version 2.9.7 is related to the handling of images stored in the public folder within the project's root directory. To import these images, I utilized Vite's import.meta.glob function, like so: imp ...

javascriptreactjsvite

Inject a cookie into the Axios interceptor for the request handler

I am in the process of setting up Axios to always include a request header Authorization with a value from the user's cookie. Here is my code: import axios, { AxiosRequestConfig, AxiosResponse} from 'axios'; import {useCookies} from "react-c ...

reactjstypescriptaxios

HTML5's video tags are capable of displaying video content without audio playback functionality

My current project involves importing videos using PHP, utilizing a video tag. However, I've encountered an audio issue while doing so. I've tried various codes such as: <video controls> <source src="https://www.w3schools.com/html/mov_ ...

phpjqueryhtmlcss

Unable to get font-face to function properly on IE versions 7 and 8

I'm having trouble getting the font-face to work properly on both IE7 and IE8. This is the code snippet I have used: @font-face { font-family: 'DroidSans'; src: url('fonts/DroidSans.eot'); src: url('fonts/DroidSa ...

cssinternet-explorer-8cross-browserinternet-explorer-7

Explore how to set up Express with React without resorting to using create-react

I am familiar with the react and Node.js Express bundle, but I require assistance. While this question may have been posed by someone else before, I have not come across a similar query within the same framework. The specific question is: How can queries ...

javascriptmysqlnode.jsreactjsexpress

Challenges encountered when creating routes in Reactjs

I'm currently working on a project and facing some challenges with managing routes. My frontend is split into two sections: one for the client side and the other for the admin panel, which is responsible for managing the client side. For example, if I ...

javascriptreactjsroutesnavigation

Ways to modify the header color of a card by utilizing a Select element in Javascript, while ensuring that it does not impact other cards

I am facing an issue with multiple cards, each containing a Select element. When a user selects an option from the Select element, the card header changes color, but it also affects all other card headers. How can I separate them? [data-background-co ...

javascripthtmlcssbootstrap-5

Discover the power of using the Apollo useMutation function within a customized React hook

I'm struggling to understand Hooks, particularly when I encounter an Invalid hook call error. The latest issue is with using the useMutation hook from Apollo within a custom hook. Can someone please help me figure out what's going wrong? Compone ...

reactjsreact-hooksnext.jsapollo-clientreact-custom-hooks

React is having trouble resolving the bootstrap issue

While working through a tutorial, I started the frontend development of my React project by executing this command: npx create-react-app frontend The tutorial instructor mentioned using bootstrap, but did not specify where it was installed. When I reache ...

reactjsnpmbootstrap-5create-react-app

Is it possible for the JavaScript code to cease execution once the tab is closed?

I am working on a JavaScript code snippet that is designed to execute once a component finishes loading: function HelloThere() { React.useEffect(() => { setTimeout(() => { // code to make a server call to write data to DB ...

javascriptreactjs

Radio buttons have been concealed and are not visible

Tried the solutions recommended in a previous question about radio buttons not showing in Safari and Chrome, but unfortunately, it did not solve my problem. It seems like this issue is different from the one discussed in that question. The WordPress them ...

htmlcssradio-button

Creating two div elements next to each other in an HTML file using Django

I'm having trouble arranging multiple divs in a single line on my website. Utilizing float isn't an option for me due to the dynamic number of divs generated by Django posts. Here is the code I am currently using: Index.html <!DOCTYPE html&g ...

pythonhtmlcssdjango

Error: The resource could not be retrieved due to a network issue

After encountering similar issues without finding a solution, I turned to this platform for help. I am new to front-end development with React and have set up separate applications for the front end and backend on different ports. Backend: Laravel framewo ...

reactjslaravelcorsfetch-api

Numerous CSS/JS Dropdown Menus

I am seeking the ability to implement a dropdown through CSS in various locations within my HTML prototype. This implies that I require the capability to position multiple dropdowns anywhere on the page. Currently, I utilize this method to generate a sing ...

javascripthtmlcss

Update the default monospaced font in Draft.js

Is it possible to change the default system monospace font in Draft Editor to Consolas using Draft.css or global css classes? ...

cssreactjsdraftjs

Setting up webpack.config for Reactjs to utilize jsx-html-class: A comprehensive guide

I recently added the jsx-html-class package using npm, but I'm not sure how to update my webpack.config.js file to incorporate it. var webpack = require("webpack"); var path = require("path"); module.exports = { context: path.join(__dirname, "sr ...

reactjsnpmwebpack

Tips for incorporating background color with CSS pseudo-elements

I'm attempting to replicate the outcome shown in the screenshot but I'm having difficulty achieving it without adding any new DOM elements. When I click on the demo link and choose a date range, the start date and end date selections are not dis ...

cssreactjs

Issue with sticky navbar in parallax design

I have been working on a website where all pages feature a header and a navbar located just below it. As the user scrolls down the page, I want the navbar to stick to the top of the screen once it reaches that position. However, on one specific page, I am ...

javascripthtmlcss