Typed styled() Components, defineVariables Tokens, and Theming Without a React Provider
Styling Salty CSS Components in React
The styling section walks through every primitive Salty CSS gives you for authoring real CSS from TypeScript — from the basic styled() component and className() helpers, to design tokens, theming, font registration, variants, overrides, media queries, animations, and reusable templates. Start with Component styles and pick up the others as you need them.
In this section
- Salty CSS Basics for ReactUnderstand styled components, className, tokens, and global styles in Salty CSS.
- Design Tokens and Variables for ReactDefine design tokens with defineVariables — static, responsive, and conditional scopes for theming and responsive design.
- Theming and Dark Mode in React Without a ProviderAdd dark mode and multi-theme support to your app with conditional CSS variables — no React provider, no context, no flash on hydration. Just flip an attribute.
- Web Fonts in React AppsRegister web fonts with defineFont — local files, remote stylesheets, and CSS-variable exports for Salty CSS styles.
- External CSS Imports in React ProjectsPull external CSS into your Salty CSS build with defineImport — relative paths, npm packages, public assets, and URLs.
- Class Name Strings in ReactGenerate reusable Salty CSS class strings with the className function for any element.
- Variants for React ComponentsCompose variant, compound, and default styles to build adaptable components in Salty CSS.
- Extending React Styled ComponentsExtend styled components, swap elements, and override styles with props in Salty CSS.
- Media Queries and Breakpoints in React StylesUse defineMediaQuery to author responsive styles and breakpoints in Salty CSS.
- Keyframes and Animations in React ComponentsDefine typed @keyframes and stagger sequences with the keyframes() function in Salty CSS.
- Reusable Style Templates for ReactBuild reusable style patterns with defineTemplates for cross-component consistency in Salty CSS.