mirror of
https://github.com/Dvorinka/Devour.git
synced 2026-06-04 12:33:04 +00:00
Tomas Dvorak
17 lines
1.9 KiB
JSON
17 lines
1.9 KiB
JSON
{
|
|
"id": "0db9672638dff0159fda288b",
|
|
"source": "solid:signals",
|
|
"type": "github-document",
|
|
"title": "style",
|
|
"content": "---\ntitle: Style\norder: 4\nuse_cases: 'inline styles, critical css, theme styles, dynamic styling, css-in-js'\ntags:\n - style\n - css\n - inline\n - styling\n - head\nversion: '1.0'\ndescription: \u003e-\n Add inline CSS styles to your Solid app's head with the Style component.\n Useful for critical CSS and dynamic styling needs in your application.\n---\n\n`Style` is a component that adds the [`style`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style) element to your document's `head`.\n\n```tsx twoslash\nimport { Style } from \"@solidjs/meta\";\n\n\u003cStyle\u003e\n\t{`\n body {\n background-color: #000;\n }\n `}\n\u003c/Style\u003e;\n```\n\n## Usage\n\n### Adding `style` tag\n\nThe `Style` component can add CSS to style elements within your application.\nIt is recommended to add styles in an external stylesheet and use a `Link` instead, rather than using this component, however.\n\n:::tip[Note]\n\tStyles within the `Style` component are not scoped.\n:::\n\n```tsx twoslash\nimport { MetaProvider, Style } from \"@solidjs/meta\";\n\nexport default function Root() {\n\treturn (\n\t\t\u003cMetaProvider\u003e\n\t\t\t\u003cStyle\u003e{`\n p {\n color: #26b72b;\n }\n `}\u003c/Style\u003e\n\t\t\u003c/MetaProvider\u003e\n\t);\n}\n```",
|
|
"url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-meta/reference/meta/style.mdx",
|
|
"metadata": {
|
|
"path": "src/routes/solid-meta/reference/meta/style.mdx",
|
|
"repo": "solidjs/solid-docs",
|
|
"repo_url": "https://github.com/solidjs/solid-docs.git",
|
|
"size": 1186,
|
|
"source_type": "github"
|
|
},
|
|
"hash": "54126249865a19a6d870d3250592dde5153405b06d0bf5faeb7e1825bfcc691b",
|
|
"timestamp": "2026-02-23T11:43:00.191327378+01:00"
|
|
} |