style.mdx

title	Style
order	4

Style is a component that adds the style element to your document's head.

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

<Style>
	{`
    body {
      background-color: #000;
    }
  `}
</Style>;

Usage

Adding style tag

The Style component can add CSS to style elements within your application. It is recommended to add styles in an external stylesheet and use a Link instead, rather than using this component, however.

Styles within the `Style` component are not scoped.

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

export default function Root() {
	return (
		<MetaProvider>
			<Style>{`
          p {
            color: #26b72b;
          }
        `}</Style>
		</MetaProvider>
	);
}