JSX attributes

classList

Removed in Solid 2.0

The classList pseudo-attribute has been removed in Solid 2.0. Its functionality has been merged into the class attribute, which now accepts a string, an object, or an array.

Migration

In Solid 2.0, the class attribute handles all class-related use cases. It accepts three forms:

String (unchanged)

<div class="active editing" />

<div class={state.active ? 'active' : undefined} />

Object (replaces `classList`)

Pass an object where keys are class names and values are booleans to conditionally toggle classes. This replaces the old classList attribute.

// Solid 1.x (removed)
<div classList={{ active: state.active, editing: state.currentId === row.id }} />

// Solid 2.0
<div class={{ active: state.active, editing: state.currentId === row.id }} />

Array (new in 2.0)

Pass an array to combine static strings, dynamic strings, and conditional objects:

<div class={[
  "base-class",
  state.active && "active",
  { editing: state.currentId === row.id }
]} />

Dynamic class names and signal values

// Dynamic class name and value
<div class={{ [className()]: classOn() }} />

// Signal-driven class object
const [classes, setClasses] = createSignal({})
setClasses((c) => ({ ...c, active: true }))
<div class={classes()} />

Migration summary

Solid 1.x	Solid 2.0
`classList={{ active: isActive() }}`	`class={{ active: isActive() }}`
`class="static" classList={{ dynamic: isDynamic() }}`	`class={["static", { dynamic: isDynamic() }]}`
Mixing `class` and `classList` (fragile)	Single `class` attribute handles all cases

Report an issue with this page