styled-components VS JSS

In general I recommend using styled-components or emotion. These directly attach CSS to your components in a scoped way so that your CSS files aren’t stepping on each other’s toes all the time and make sure styling is colocated with the component.

Not only that - after React got more popular - we started to place CSS in components as well (CSS-in-JS like this):

There are different ways to implement CSS In JS, most commonly using either framework-dependent or framework-agnostic libraries. Styled components are among the most popular of them with over 30,000+ stars on GitHub.

Since the main focus is to develop a library in accordance with the principles of accessibility, Cactus UI was developed in a way that without adopting a special design language only includes the necessary styling of components for proper work. However, the developer can easily style it according to the design she/he needs. Also, the developer can use it with different libraries (styled-components etc.) or can style all components according to she/he design with the help of css.

With Next.js, you have complete control over the design of your site. It uses Styled Components for styling, which allows you to write actual CSS code within your JavaScript files. This means you can easily customize the appearance of your blog without having to navigate between multiple files.

See https://observatory.mozilla.org and https://github.com/styled-components/styled-components/issues/2363 and https://content-security-policy.com/examples/allow-inline-style/

Simply said, Styled Components is a third-party library that lets you design reusable custom HTML components with predefined CSS properties and use them anywhere you choose inside your project.

JSS

It is possible. At its most simple, you could just modify the style property on every element. That's not generally considered best practice, but there are a number of "CSS-in-JS" libraries which streamline the process. The typically generate dynamic CSS classes and apply them to your elements. A big one is JSS.

Material UI v5 brought some amazing updates, but switching from JSS to Emotion had an arguably nasty side-effect: it was no longer as straightforward to group your component styles in classes. Fortunately, a fantastic library emerged that allowed developers to not only reduce the extreme pain from migrating all their classes from v4's makeStyles to emotion, but to also to continue to writing classes in practically the same syntax, with wonderful TS type-safety. This library was tss-react, and it was one of my favorite open source discoveries of 2021.

I started writing a long response, but I want to add that a simple CRA + JSS + TS (named exports only) stack solves or abstracts away most of these issues.

Official docs

If you have some experience with React, you probably came across styled-components. In the last few years, the concept of css-in-js became more popular, and there are multiple libraries that are available for us to use. styled-components is one of them, but you can also find Emotion, Radium, JSS, and more. In this post I'm not going to cover the pros and cons of traditional stylesheet files vs. styled-components, and instead - I'm going to focus on tagged template literals - the "magic" that let us use the styled-components syntax.

See for example this one. Sometimes this simple query doesn't work:

JavaScript brings more of the engineering flavour into the app styling process. And it's possible with CSS-in-JS solutions, or shorter JSS.

✨ css loader 💥 jss 🌟 csjs ☄️ aphrodite