styled-components VS linaria

I'm using react and electron, if matters... I'm reading the docs of styled-components but I still couldn't figure out how to scope existing third-party libraries.

You don't have to use CSS files, you can use libraries such as styled-components that allow you to create reusable styled components:

I had trouble naming this question and it seems quite broad, so, forgive me oh moderators. I'm trying out styled components for the first time and trying to integrate it into my react app. I have the following so far:

styled-components

Here at Anvil, we use styled-components. PurgeCSS functionality is essentially baked into styled-components, with a few caveats. If PurgeCSS is already included in styled-components, can you still use both? And if you can, is there any benefit to doing so?

CSS-in-JS category of tooling (JSS, Styled-Components, etc.) does 'inline++' styling, which also has the added benefit of placing style information right next to template.

I have a ref on a component I am converting over to a styled component in my app. The ref is used to access the offsetHeight and scrollHeight properties on the raw html element of the component. Once I switched this component to a styled component, the ref now points to the styled component instead of the raw html element, and I'm unsure how to reference the base element. Can this be done?

Let's say that you are a happy user of styled-components. Everything is great until you decide to adopt integrate server-side rendering (SSR). Getting something like this set up has huge benefits:

I would recommend JSS or styled components.

https://github.com/callstack/linaria zero runtime CSS-in-JS is a thing too

There are a myriad of CSS-in-JS tools, many of which are zero-runtime giving you all the benefits of authoring in a single file without the drawbacks of inline styles. That's how I prefer to do my CSS with React anyway... Vanilla Extract and/or Linaria are my current favorites.

CSS in JS integrates with React very well. The most popular CSS in JS tool is styled-components, which allows you to define styles inside JavaScript using tagged templates. However, there are newer approaches to CSS in JS that are often superior in certain ways. Some of the most interesting of those are Linaria and vanilla-extract. Linaria is a library that aims to optimize CSS in JS by compiling CSS in JS to native CSS. Linaria also has built-in React integration, making it easier to add dynamic styling without a high runtime cost. vanilla-extract does the same thing but better integrates with TypeScript and offers features like building custom utility styles.

For a more modern approach without the bloat, try linaria

One thing I think you're really missing is what the output is of CSS-in-JS. There are tens of CSS-in-JS frameworks that can output anything from: CSS Module like classes (Linaria, Vanilla Extract), Atomic Classes (StyleX, PreStyle), to the more traditional (Styled Components, Emotion) many with zero runtime cost (ie no JS bloat). That's why I say CSS-in-JS is primarily about developer experience... the output can often be whatever you want it to be.

Linaria (Most popular, support React and Svelte)

> And CSS-in-JS has worse performance because styles aren't compiled to sytlesheets like they're supposed to be, they're applied at runtime.

That depends on the tool. Libraries like Linaria [1] ("zero-runtime" CSS-in-JS) do generate CSS files.

[1] https://linaria.dev

Zero runtime option. https://github.com/callstack/linaria

In future, I might try out libraries like Linaria which, during coding have the exact same API as styled-components, but the runtime is completely removed on build and the CSS is extracted into separate CSS files, which is super DOPE!!! 🤓

Frequently, React developers are worried about how to write CSS in TSX(JSX) template. You must choose from CSS Modules, styled-components, linaria, and so on. Additionally, CSS architecture is difficult about scoping, e.g. BEM, FLOCSS.