Devour/devour_data/docs/class-style.json

{
  "id": "97931f2f8fe801afbe8adab8",
  "source": "solid:signals",
  "type": "github-document",
  "title": "class-style",
  "content": "---\ntitle: Class and style\norder: 2\nuse_cases: \u003e-\n  styling components, dynamic theming, conditional styling, css integration,\n  responsive design, ui customization\ntags:\n  - styling\n  - css\n  - classes\n  - themes\n  - dynamic\n  - ui\nversion: '1.0'\ndescription: \u003e-\n  Style Solid components with CSS classes and inline styles. Learn dynamic\n  styling, classList usage, and theme implementation.\n---\n\nSimilar to HTML, Solid uses `class` and `style` attributes to style elements via [CSS (Cascading Style Sheets)](https://developer.mozilla.org/en-US/docs/Glossary/CSS).\n\n- **Class attribute**: Enables styling one or more elements through CSS rules.\n- **Style attribute**: Inline styles that style single elements.\n\n## Inline styling\n\nThe `style` attribute allows you to style a single element and define CSS variables dynamically during runtime.\nTo use it, you can pass either a string or an object.\n\n```tsx\n// String\n\u003cdiv style=\"color: red;\"\u003eThis is a red div\u003c/div\u003e\n\n// Object\n\u003cdiv style={{ color: \"red\" }}\u003eThis is a red div\u003c/div\u003e\n```\n\nWhen using an object, the keys represent the CSS property names, and the values represent the CSS property values.\nThe keys must be in dash-case, and the values must be strings.\n\n\u003cEraserLink\n\thref=\"https://app.eraser.io/workspace/maDvFw5OryuPJOwSLyK9?elements=PgkKTGxuuOtDiQ_1KDA5dw\"\n\tpreview=\"https://app.eraser.io/workspace/maDvFw5OryuPJOwSLyK9/preview?elements=PgkKTGxuuOtDiQ_1KDA5dw\u0026type=embed\"\n/\u003e\n\nWhile inline styles are useful for rapid prototyping, they are not recommended for production use.\nThis is because they are not reusable, and they can be difficult to maintain over time.\n\n## Classes\n\nThe `class` attribute allows you to style one or more elements through CSS rules.\nThis provides a more structured approach to styling, as it allows you to reuse styles across multiple elements.\n\nClasses are defined in CSS files. You can import these files using the `import` statement at the top of your component file.\nThe CSS file's contents will be inserted into a style tag in the document head.\n\n```jsx\nimport \"./Card.css\";\n\nfunction Card() {\n\t// ...\n}\n```\n\n### Dynamic styling\n\nDynamic styling provides a way to change the appearance of a component based on state or other factors like user inputs.\nThis is useful for creating components that can adapt to different scenarios without having to create multiple versions of the same component:\n\n```tsx\nconst [theme, setTheme] = createSignal(\"light\");\n\n\u003cdiv class={theme() === \"light\" ? \"light-theme\" : \"dark-theme\"}\u003e\n\tThis div's theme is determined dynamically!\n\u003c/div\u003e;\n```\n\n[Props](/concepts/components/props) are another way to change styles.\nBy passing props to components, you can adapt styles based on the component's usage or the data it receives:\n\n```tsx\nfunction ThemedButton(props) {\n\treturn (\n\t\t\u003cbutton class={props.theme}\u003e\n\t\t\t{props.theme === \"light\" ? \"Light Button\" : \"Dark Button\"}\n\t\t\u003c/button\u003e\n\t);\n}\n```\n\n### `classList`\n\nWhen you want to apply multiple classes to an element, you can use the [`classList` attribute](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList).\nTo use it, you can pass either a string or an object where the keys represent the class names and the values represent a boolean expression.\nWhen the value is `true`, the class is applied; when `false`, it is removed.\n\n```tsx\nconst [current, setCurrent] = createSignal(\"foo\");\n\n\u003cbutton\n\tclassList={{ \"selected\" : current() === \"foo\" }}\n\tonClick={() =\u003e setCurrent(\"foo\")}\n\u003e\n\tfoo\n\u003c/button\u003e;\n```\n\n`classList` is often more efficient than `class` when handling multiple conditional classes.\nThis is because `classList` selectively toggles only the classes that require alteration, while `class` will be re-evaluated each time.\nFor a single conditional class, using `class` might be simpler but as the number of conditional classes increases, `classList` offers a more readable and declarative approach.\n\n:::note\n    While it is possible, mixing `class` and `classList` can introduce unexpected errors.\n    If both are reactive when the `class` value changes, Solid will set the entire `class` attribute.\n    This will remove any classes set by `classList`.\n\n    To avoid this, the `class` attribute should be set to a static string or nothing.\n    Alternatively, `class` can be set to a static computed value (e.g. `class={baseClass()}`), but then it must be put before any `classList` attributes.\n\n    Additionally, since `classList` is a pseudo-attribute, it doesn't work in prop spreads like `\u003cdiv {...props} /\u003e` or in `\u003cDynamic\u003e`.\n:::\n\nFor a guide on how to style your components, see [Styling Your Components](/guides/styling-your-components), where we cover the different ways to style your components using libraries such as [Tailwind CSS](https://tailwindcss.com/).",
  "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/concepts/components/class-style.mdx",
  "metadata": {
    "path": "src/routes/concepts/components/class-style.mdx",
    "repo": "solidjs/solid-docs",
    "repo_url": "https://github.com/solidjs/solid-docs.git",
    "size": 4761,
    "source_type": "github"
  },
  "hash": "bff59961a1d068c60facf0c565b4ac3179f8cfb428af57e937340b7a7a9c6001",
  "timestamp": "2026-02-23T11:43:00.186342519+01:00"
}