Skip to main content

​
Overview

The createGlobalStyle function creates global (unscoped) styles that apply to your entire application. It’s perfect for:
  • CSS resets and normalizations
  • Base typography
  • Theme CSS variables
  • Global animations
  • Font imports

​
Basic Usage

import { createGlobalStyle } from '@alex.radulescu/styled-static';
import { createRoot } from 'react-dom/client';

const GlobalStyle = createGlobalStyle`
  * {
    box-sizing: border-box;
  }

  body {
    margin: 0;
    font-family: system-ui, sans-serif;
  }
`;

// Render once at app root
createRoot(document.getElementById('root')!).render(
  <>
    <GlobalStyle />
    <App />
  </>
);
The component renders nothing—CSS is extracted at build time. You just need to render it once so Vite includes the virtual CSS import.

​
CSS Reset Example

A common pattern is creating a global reset: 
const GlobalStyle = createGlobalStyle`
  /* Box sizing */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  /* Remove default margins */
  * {
    margin: 0;
  }

  /* Body defaults */
  body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }

  /* Media defaults */
  img,
  picture,
  video,
  canvas,
  svg {
    display: block;
    max-width: 100%;
  }

  /* Form element font inheritance */
  input,
  button,
  textarea,
  select {
    font: inherit;
  }

  /* Avoid text overflow */
  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    overflow-wrap: break-word;
  }
`;

​
Theme Variables

Define CSS variables for theming: 
const GlobalStyle = createGlobalStyle`
  :root {
    /* Colors */
    --color-primary: #3b82f6;
    --color-secondary: #8b5cf6;
    --color-success: #10b981;
    --color-danger: #ef4444;

    /* Typography */
    --font-sans: system-ui, -apple-system, sans-serif;
    --font-mono: 'Fira Code', monospace;

    /* Spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 1rem;
    --space-4: 1.5rem;

    /* Radii */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
  }

  [data-theme="dark"] {
    --color-bg: #0a0a0a;
    --color-text: #f1f5f9;
  }
`;

​
Typography Setup

Set up base typography styles: 
const GlobalStyle = createGlobalStyle`
  body {
    margin: 0;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-text);
    background: var(--color-bg);
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin: 0;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.02em;
  }

  h1 {
    font-size: 2.5rem;
  }

  h2 {
    font-size: 2rem;
  }

  h3 {
    font-size: 1.5rem;
  }

  code {
    font-family: 'Fira Code', monospace;
    font-size: 0.9em;
  }
`;

​
Font Imports

Import web fonts in global styles: 
const GlobalStyle = createGlobalStyle`
  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Fira+Code&display=swap');

  body {
    font-family: 'Inter', sans-serif;
  }
`;
Font imports can impact initial page load. Consider self-hosting fonts or using font-display: swap for better performance.

​
Real-World Example

Here’s the complete global style setup from the styled-static documentation: 
import { createGlobalStyle } from '@alex.radulescu/styled-static';

const GlobalStyle = createGlobalStyle`
  :root {
    --color-bg: #ffffff;
    --color-bg-sidebar: #fafafa;
    --color-bg-code: #0f0f0f;
    --color-border: #e2e8f0;
    --color-text: #0f172a;
    --color-text-secondary: #64748b;
    --color-primary: #10b981;
    --color-primary-hover: #059669;
    --radius: 8px;
    --radius-lg: 12px;
    --transition: 0.15s ease;
  }

  [data-theme="dark"] {
    --color-bg: #0a0a0a;
    --color-bg-sidebar: #111111;
    --color-text: #f1f5f9;
    --color-text-secondary: #94a3b8;
  }

  * {
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.12) transparent;
  }

  html {
    scroll-behavior: smooth;
  }

  body {
    margin: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 15px;
    line-height: 1.65;
    color: var(--color-text);
    background: var(--color-bg);
    transition: background var(--transition), color var(--transition);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  ::selection {
    background: var(--color-primary);
    color: white;
  }
`;

export default function App() {
  return (
    <>
      <GlobalStyle />
      {/* Rest of app */}
    </>
  );
}

​
Multiple Global Style Components

You can create multiple global style components for organization: 
const Reset = createGlobalStyle`
  * { box-sizing: border-box; }
  body { margin: 0; }
`;

const ThemeVariables = createGlobalStyle`
  :root {
    --color-primary: #3b82f6;
    --color-bg: white;
  }

  [data-theme="dark"] {
    --color-bg: black;
  }
`;

const Typography = createGlobalStyle`
  body {
    font-family: system-ui, sans-serif;
    line-height: 1.6;
  }
`;

// Render all of them
function App() {
  return (
    <>
      <Reset />
      <ThemeVariables />
      <Typography />
      {/* Rest of app */}
    </>
  );
}

​
Scrollbar Styling

Customize scrollbars globally: 
const GlobalStyle = createGlobalStyle`
  /* Firefox */
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) transparent;
  }

  /* Webkit (Chrome, Safari, Edge) */
  *::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  *::-webkit-scrollbar-track {
    background: transparent;
  }

  *::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 3px;
  }

  *::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
  }

  :root {
    --scrollbar-thumb: rgba(0, 0, 0, 0.12);
    --scrollbar-thumb-hover: rgba(0, 0, 0, 0.2);
  }

  [data-theme="dark"] {
    --scrollbar-thumb: rgba(255, 255, 255, 0.12);
    --scrollbar-thumb-hover: rgba(255, 255, 255, 0.2);
  }
`;

​
Build Output

At build time, createGlobalStyle is transformed: 
// What you write:
const GlobalStyle = createGlobalStyle`
  * { box-sizing: border-box; }
  body { margin: 0; }
`;

// What gets generated:
import '@alex.radulescu/styled-static:global-abc123.css';
const GlobalStyle = () => null;

// CSS extracted to virtual module:
/* styled-static:global-abc123.css */
* { box-sizing: border-box; }
body { margin: 0; }
The component becomes a no-op function. CSS is extracted to a static file and imported by Vite.

​
Best Practices

1

Render once at root

Place <GlobalStyle /> at the root of your app, typically alongside your router or theme provider.
2

Use CSS variables for theming

Define theme values as CSS variables in global styles, then reference them in component styles.
3

Keep it minimal

Only include truly global styles. Component-specific styles should use styled.
4

Organize with multiple components

Split large global styles into focused components (Reset, Typography, Theme, etc.).

​
When to Use Global Styles

✅ Do use for:
  • CSS resets
  • Base typography
  • Theme CSS variables
  • Font imports
  • Global animations (like @keyframes used everywhere)
❌ Don’t use for:
  • Component-specific styles (use styled instead)
  • Layout components (use styled.div, etc.)
  • Styles that should be scoped
If you’re unsure whether a style should be global, default to using styled components. Global styles can lead to unexpected cascading issues.

Build docs developers (and LLMs) love

Get started for freeTalk to us