Meta reference

Style

Edit this page

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

import { 
const Style: Component<JSX.StyleHTMLAttributes<HTMLStyleElement>>
Style } from "@solidjs/meta";


<
const Style: Component<JSX.StyleHTMLAttributes<HTMLStyleElement>>
Style>
  {`
    body {
      background-color: #000;
    }
  `}
</
const Style: Component<JSX.StyleHTMLAttributes<HTMLStyleElement>>
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.

import { 
const MetaProvider: ParentComponent
MetaProvider, 
const Style: Component<JSX.StyleHTMLAttributes<HTMLStyleElement>>
Style } from "@solidjs/meta";


export default function 
function Root(): JSX.Element
Root() {
  return (
    <
const MetaProvider: ParentComponent
MetaProvider>
      <
const Style: Component<JSX.StyleHTMLAttributes<HTMLStyleElement>>
Style>{`
          p {
            color: #26b72b;
          }
        `}</
const Style: Component<JSX.StyleHTMLAttributes<HTMLStyleElement>>
Style>
    </
const MetaProvider: ParentComponent
MetaProvider>
  );
}
Report an issue with this page