Skip to content
14 changes: 10 additions & 4 deletions src/routes/reference/jsx-attributes/classlist.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,9 @@ title: classList
order: 1
---

Solid offers two ways to set the class of an element: class and classList attributes.
Solid offers two attributes to set the class of an element: `class` and `classList`.

First, you can set class=... like any other attribute. For example:
First, `class` can be set like other attributes. For example:

```tsx
// Two static classes
Expand All @@ -27,7 +27,10 @@ Alternatively, the `classList` pseudo-attribute lets you specify an object, wher

```tsx
<div
classList={{ active: state.active, editing: state.currentId === row.id }}
classList={{
active: state.active,
editing: state.currentId === row.id,
}}
/>
```

Expand All @@ -45,6 +48,9 @@ setClasses((c) => ({ ...c, active: true }))
<div classList={classes()} />
```

It's also possible, but dangerous, to mix class and classList. The main safe situation is when class is set to a static string (or nothing), and classList is reactive. (class could also be set to a static computed value as in `class={baseClass()}`, but then it should appear before any classList pseudo-attributes.) If both class and classList are reactive, you can get unexpected behavior: when the class value changes, Solid sets the entire class attribute, so will overwrite any toggles made by classList.
While possible, mixing `class` and `classList` in Solid can lead to unexpected behavior.
The safest approach is to use a static string (or nothing) for `class` and keep `classList` reactive.
You can also use a static computed value for class, such as `class={baseClass()}`, however you must make sure it comes before any `classList` pseudo-attributes.
If both `class` and `classList` are reactive, changes to `class` will overwrite the entire `class` attribute, potentially undoing any updates made by `classList`.

Because classList is a compile-time pseudo-attribute, it does not work in a prop spread like `<div {...props} />` or in `<Dynamic>`.