Style

Style adds a <style> element with an inline body to the document head.

Import

import { Style } from "@solidjs/meta";

Type

const Style: Component<
  JSX.StyleHTMLAttributes<HTMLStyleElement> & { key?: string }
>;

Props

Accepts attributes for <style>.

children

• Type: JSX.Element
• Optional: Yes

CSS text of the style element. Applied via textContent, so it is always escaped — markup cannot be injected through it. Can be a reactive expression.

key

• Type: string
• Optional: Yes

Overrides the default identity used for deduplication.

Behavior

• Keyless <Style> instances are append-only: each one adds its own element, and unmounting removes it.
• Give a key to make one replaceable — later registrations with the same key override it, and unmounting restores the previous body.

Examples

Basic usage

import { Style } from "@solidjs/meta";

export default function Page() {
  return <Style>{`.hero { background: papayawhip; }`}</Style>;
}

Replaceable themed style

import { Style } from "@solidjs/meta";

export default function Theme(props: { accent: () => string }) {
  return <Style key="theme">{`:root { --accent: ${props.accent()}; }`}</Style>;
}

Related

• Stylesheet
• Script