Class and style

Similar to HTML, Solid uses class and style attributes to style elements via CSS (Cascading Style Sheets).

• Class attribute: Enables styling one or more elements through CSS rules.
• Style attribute: Inline styles that style single elements.

Inline styling

The style attribute allows you to style a single element and define CSS variables dynamically during runtime. To use it, you can pass either a string or an object.

// String
<div style="color: red;">This is a red div</div>

// Object
<div style={{ color: "red" }}>This is a red div</div>

When using an object, the keys represent the CSS property names, and the values represent the CSS property values. The keys must be in dash-case, and the values must be strings.

View on Eraser

While inline styles are useful for rapid prototyping, they are not recommended for production use. This is because they are not reusable, and they can be difficult to maintain over time.

Classes

The class attribute allows you to style one or more elements through CSS rules. This provides a more structured approach to styling, as it allows you to reuse styles across multiple elements.

Classes are defined in CSS files. You can import these files using the import statement at the top of your component file. The CSS file's contents will be inserted into a style tag in the document head.

import "./Card.css";

function Card() {
  // ...
}

Dynamic styling

Dynamic styling provides a way to change the appearance of a component based on state or other factors like user inputs. This is useful for creating components that can adapt to different scenarios without having to create multiple versions of the same component:

const [theme, setTheme] = createSignal("light");

<div class={theme() === "light" ? "light-theme" : "dark-theme"}>
  This div's theme is determined dynamically!
</div>;

Props are another way to change styles. By passing props to components, you can adapt styles based on the component's usage or the data it receives:

function ThemedButton(props) {
  return (
    <button class={props.theme}>
      {props.theme === "light" ? "Light Button" : "Dark Button"}
    </button>
  );
}

Enhanced class with objects and arrays

The class prop now supports multiple forms for applying conditional classes:

// String (same as before)
<div class="card" />

// Object — keys are class names, values are boolean conditions
<div class={{ active: isActive(), disabled: isDisabled() }} />

// Array — mix strings, objects, and dynamic values
<div class={["card", props.class, { active: isActive() }]} />

Example with a dynamic selection:

const [current, setCurrent] = createSignal("foo");

<button
  class={["btn", { selected: current() === "foo" }]}
  onClick={() => setCurrent("foo")}
>
  foo
</button>;

This approach is both more ergonomic and avoids the edge cases that existed when mixing class and classList in Solid 1.x.

For a guide on how to style your components, see Styling Your Components, where we cover the different ways to style your components using libraries such as Tailwind CSS.