React - Styling

About

Styling a component in React.

Methodology

Traditional

Traditional CSS-file-based styling with the import of stylesheet (with SASS, PostCSS, ..)

SSR does not like it very much.

Inline

See React - Style Attribute

No Pseudo Classes/Element
No Media Query
No Vendor Autoprefixing
No Animation / Keyframes
!important for override
No Style fallback
Performance ? Larger HTML, larger JS

All Css in Js

CSS - CSS In Js

React - Styled Component
Aphrodite, ..

HTML Script Tag injection

If you have to insert a HTML style tag, then it's important to do it in a useInsertionEffect.

Documentation / Reference