mirror of
https://github.com/Dvorinka/Devour.git
synced 2026-06-03 20:13:03 +00:00
Tomas Dvorak
17 lines
2.1 KiB
JSON
17 lines
2.1 KiB
JSON
{
|
|
"id": "d7a78a1142f175279972b450",
|
|
"source": "solid:signals",
|
|
"type": "github-document",
|
|
"title": "style",
|
|
"content": "---\ntitle: style\norder: 7\nuse_cases: \u003e-\n inline styling, dynamic styles, css variables, responsive design, theme\n customization, animated styles\ntags:\n - styling\n - css\n - inline\n - variables\n - dynamic\n - properties\nversion: '1.0'\ndescription: \u003e-\n Apply dynamic inline styles in SolidJS with string or object syntax. Set CSS\n properties and variables reactively for responsive component styling.\n---\n\nSolid's style attribute lets you provide either a CSS string or an object where keys are CSS property names:\n\n```tsx\n// string\n\u003cdiv style={`color: green; height: ${state.height}px`} /\u003e\n\n// object\n\u003cdiv style={{\n color: \"green\",\n height: state.height + \"px\" }}\n/\u003e\n```\n\nUnlike [React's style attribute](https://reactjs.org/docs/dom-elements.html#style), Solid uses **element.style.setProperty** under the hood. This means you need to use the lower-case, dash-separated version of property names instead of the JavaScript camel-cased version, such as `background-color` rather than `backgroundColor`. This actually leads to better performance and consistency with SSR output.\n\n```tsx\n// string\n\u003cdiv style={`color: green; background-color: ${state.color}; height: ${state.height}px`} /\u003e\n\n// object\n\u003cdiv style={{\n color: \"green\",\n \"background-color\": state.color,\n height: state.height + \"px\" }}\n/\u003e\n```\n\nThis also means you can set CSS variables! For example:\n\n```tsx\n// set css variable\n\u003cdiv style={{ \"--my-custom-color\": state.themeColor }} /\u003e\n```",
|
|
"url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/jsx-attributes/style.mdx",
|
|
"metadata": {
|
|
"path": "src/routes/reference/jsx-attributes/style.mdx",
|
|
"repo": "solidjs/solid-docs",
|
|
"repo_url": "https://github.com/solidjs/solid-docs.git",
|
|
"size": 1461,
|
|
"source_type": "github"
|
|
},
|
|
"hash": "813fe6a5b299520f8c8bffa6f2b4af30cfb0f49ab8e575b1ce34723a6d9e6b5e",
|
|
"timestamp": "2026-02-23T11:43:00.189578932+01:00"
|
|
} |