2^nd Practical Class:
React Styling - Chakra UI

React Browser plugin

React Developer Tools

• Chrome
• Firefox

CSS-in-JS

👩‍🎤 Emotion library for react React:

Generated HTML:

Generated CSS:

Chakra UI

⚡ Chakra UI is UI design system build on top of Emotion.

Box ... div with styling

Box documentation

See:

• Style Props
• Default Theme
  • color
  • typography
  • spacing - values for p, m, ...
  • sizes - values for w, h, ...
  • breakpoints - for responsive + more about responsive styles

Stack

Stack documentation

See also:

• Flex
• Grid
• SimpleGrid

Advanced

• For more direct access to CSS you can use sx prop

Chakra UI - 😎 Inspiration

• Choc UI - free
• Chakra Pro - paid (Don't pay for it! Use only as visual inspiration)
• additional UI inspiration:
  • Tailwind UI - paid (Don't pay for it! Use only as visual inspiration)