Table of Contents

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

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