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

• https://facebook.github.io/react/docs/dom-elements.html
• https://facebook.github.io/create-react-app/docs/adding-a-stylesheet