React Components and How To Style Them

on YouTube ↗07m

" summary

Compares four concrete methods: inline styling for high-specificity overrides and passing background images as props, traditional CSS files and modules for collocation and global rules, Tailwind as a utility-first system that required two days to set up but can centralize a design system, and CSS-in-JS (Styled-Components, Emotion) which the presenter prefers because it supports pseudo-selectors, theming and Styled-Components polymorphism (render a styled div as a button) and scales for larger projects.

AI-written summary · about

" chapters (4)

1. 0:00Start
2. 0:49REACT COMPONENTS
3. 2:03CSS STYLESHEETS
4. 2:52TAILWIND

" related talks

• 27mStyles & SASSy: Choosing the Right React Styling SolutionBree Hall · React Miami 2025
• 25mStyled and SASSy: Choosing the Right React Styling SolutionBree Hall · Commit Your Code 2024
• 22mStyled ComponentsMax Stoiber · .concat() 2018
• 29mThe Lonely and Dark Road to Styling in ReactSara Vieira · React Day Berlin 2018
• 34mCSS in ReactJoe Seifi · Reactathon 2018
• 23mThe road to styled components: CSS in component-based systemsGlen Maddern · CSS Conf EU 2017
• 30mDynamic Styling Systems with ReactKhachatur Virabyan | ReactConfAM19 · React Conf Armenia 2019
• 44mWriting styles for React componentsJavi Velasco · FrontFest 2017