Style

Style is an injection component that adds CSS styles to the preview iframe. It renders nothing in the React tree but injects a <style> tag into the iframe's document.

import { Style } from '@codespark/react';

Basic Usage

Pass the Style component as a child of Codespark or CodesparkPreview:

import { ,  } from '@codespark/react';

const  = `export default function App() {
  return (
    <button className="custom-button">
      Styled Button
    </button>
  );
}`;

const  = `
.custom-button {
  padding: 12px 24px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s;
}

.custom-button:hover {
  transform: scale(1.05);
}
`;

export default function () {
  return (
    < ={}>
      <>{}</>
    </>
  );
}

Props

Style accepts all standard HTML <style> attributes:

children

CSS code to inject.

Type	Default	Since
`string`	-	v1.0.0

<>{`.my-class { color: red; }`}</>

type

Style type attribute.

Type	Default	Since
`string`	-	v1.0.0

For Tailwind CSS directives, use type="text/tailwindcss":

< ="text/tailwindcss">
  {`
    @theme inline {
      --color-primary: oklch(0.7 0.15 200);
    }
  `}
</>

media

Media query for the styles.

Type	Default	Since
`string`	-	v1.0.0

< ="(prefers-color-scheme: dark)">
  {`
    body {
      background: #1a1a1a;
      color: white;
    }
  `}
</>

Other Attributes

Any other valid <style> HTML attributes are also supported.

Use Cases

Custom Component Styles

<>
  <>
    {`
      .card {
        padding: 20px;
        border-radius: 12px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      }

      .card-title {
        font-size: 1.5rem;
        font-weight: bold;
        margin-bottom: 8px;
      }
    `}
  </>
</>

CSS Variables

<>
  <>
    {`
      :root {
        --primary-color: #3b82f6;
        --secondary-color: #10b981;
        --spacing-unit: 8px;
      }

      .themed-button {
        background: var(--primary-color);
        padding: calc(var(--spacing-unit) * 2);
      }
    `}
  </>
</>

Animations

<>
  <>
    {`
      @keyframes fadeIn {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
      }

      .animated {
        animation: fadeIn 0.3s ease-out;
      }
    `}
  </>
</>

Dark Mode Styles

<>
  <>
    {`
      .container {
        background: white;
        color: black;
      }

      @media (prefers-color-scheme: dark) {
        .container {
          background: #1a1a1a;
          color: white;
        }
      }
    `}
  </>
</>

Tailwind CSS Extensions

Use type="text/tailwindcss" to add Tailwind directives:

<>
  < ="text/tailwindcss">
    {`
      @theme inline {
        --color-brand: oklch(0.6 0.2 250);
      }

      @custom-variant dark (&:where(.dark, .dark *));
    `}
  </>
</>

Combining with Tailwind CSS

Codespark has Tailwind CSS enabled by default. You can use Style to add custom CSS alongside Tailwind classes:

import { ,  } from '@codespark/react';

const  = `export default function App() {
  return (
    <div className="p-4 rounded-lg custom-gradient">
      <h1 className="text-xl font-bold text-white">
        Tailwind + Custom CSS
      </h1>
    </div>
  );
}`;

export default function () {
  return (
    < ={}>
      <>
        {`
          .custom-gradient {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          }
        `}
      </>
    </>
  );
}

Injection Order

Styles are injected into the iframe's <head> element. They are applied before the preview renders, ensuring your styles are available immediately.

Specificity

Custom styles have the same specificity as regular CSS. Use more specific selectors or !important if you need to override Tailwind utilities.

On this page