Classes and styles

The class prop takes a string, an object, or an array of both. In an object, each key is a class name, applied while its value is true:

<div class={["bar", { low: percent() < 30, done: percent() === 100 }]} />

The style prop takes a string or an object of CSS properties, written with their CSS names:

<div style={{ width: `${percent()}%`, "background-color": color() }} />

Each class and each property is its own binding. When percent changes, Solid toggles the classes and sets the width; nothing else on the element is touched.

Try it: make the bar's width follow percent(). Add the low class below 30% and the done class at 100%, then click through the tasks.