{
  "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"
}