Introduction

Hopper embraces a Styled System-inspired approach to styling components, allowing developers to define styles directly via props rather than writing CSS. This method provides a type-safe and intuitive API, making it easier to build consistent, on-brand interfaces without dealing with complex class names or global styles. With built-in intellisense and static analysis, developers can confidently apply design tokens without memorizing them, ensuring efficiency and reducing errors.

Style Props

Style props are the most fundamental way to style your components in Hopper. They are basically css styles as props. Learn more about style props

Do's and Don'ts

These guidelines help ensure consistency, maintainability, and design system compliance when using the styled system.

Do
Use styled system props to apply design tokens directly to components
Don't
Use the standard React 'style' prop
Do
Use styled system props to apply design tokens directly to components
Don't
Use external CSS files or CSS-in-JS solutions alongside styled system components
Do
Use the UNSAFE_ prefix when you use a value that is not a token
Don't
Use the standard React style prop

Key Concepts

Follow these links to learn key concepts about the Styled System: