Dynamic and scoped styling with lazy loading and server-side rendering support. Qwik's styling system integrates seamlessly with the resumable architecture.
Add styles to components with automatic lazy loading.
/**
* Add global styles to component
* @param styles - CSS styles string
*/
function useStyles$(styles: string): void;
/**
* Add global styles from QRL
* @param styles - QRL-wrapped CSS styles
*/
function useStylesQrl(styles: QRL<string>): void;
/**
* Add scoped styles to component
* @param styles - CSS styles string
*/
function useStylesScoped$(styles: string): void;
/**
* Add scoped styles from QRL
* @param styles - QRL-wrapped CSS styles
*/
function useStylesScopedQrl(styles: QRL<string>): void;
// Scoped styles configuration
interface UseStylesScoped {
scopeId: string;
}Usage Examples:
import { component$, useStyles$, useStylesScoped$ } from "@builder.io/qwik";
export const StyledComponent = component$(() => {
// Global styles
useStyles$(`
.global-header {
background: linear-gradient(45deg, #333, #666);
color: white;
padding: 1rem;
}
`);
// Scoped styles (only apply to this component)
useStylesScoped$(`
.button {
background: var(--primary-color, #007acc);
color: white;
border: none;
padding: 0.5rem 1rem;
border-radius: 4px;
cursor: pointer;
}
.button:hover {
opacity: 0.9;
}
`);
return (
<div>
<header class="global-header">
<h1>Styled Header</h1>
</header>
<button class="button">Styled Button</button>
</div>
);
});