React + Styled Components 2 (May 28 Notes)

[tanaypratap]

styled components: extension and theming

prerequisites

knowledge of React and CSS chapter 1 of this series

lesson plan

• Extension

  • why you need it
  • structuring your app
  • extension vs. props
  • creating some extended buttons

• Theming

  • idea of theming, tour of Material UI
  • consistent spacing, font sizes: looks better
  • defining your tokens upfront
  • Intro to ThemeProvider component
  • Quick Example

• Toggling Dark Theme

  • time check, if time permits code a side which provides user both the theme options.

assign note volunteer

vikrant bhat

[bhatvikrant]

🔗

Session Links | ----------- | | 1. Code sandbox (contd. from part-1) | | 2. Bootstrap 4 - components | | 3. styled-components docs | | 4. Bootstrap 4 - badges | | 5. Read about design here (material design) | |6. Theming in styled-components|