classList overrides only sometimes

[kf5v]

I got a confusing case where classList does not override but merge classes when passed from parent to child.

const App: Component = () => {
  return (
    <div>
      <Button classList={{ 'text-color': true }}>
        Test
      </Button>
    </div>
  );
};
const Button: Component<JSX.ButtonHTMLAttributes<HTMLButtonElement>> = (
  props
) => {
  return (
    <button
      classList={{
        'bg-color': true,
      }}
      {...props}
    ></button>
  );
};

That Button gets both classes applied.

<button class="bg-color text-color">Test</button>

Is it something expected and where I can read more on how and why?
I find it useful, but is it reliable?
Is it possible to use it without the parent->child passed props?

For example the following does not work

const borderColor = {
  classList: { 'border-color': true },
};
<Button classList={{ 'text-color': true }} {...borderColor}>
  Test
</Button>

Example playground: https://stackblitz.com/edit/github-te6jt77k?file=src%2FApp.tsx

[harshagarwalnyu]

Both behaviors are expected and intentional — they come from two different merging mechanisms.

Case 1: {...props} spread in the component body → merge

<button classList={{ 'bg-color': true }} {...props}></button>

SolidJS compiles JSX spreads through mergeProps() when the spread source is a component's props object. mergeProps has special handling for class, classList, and style — it merges them rather than overriding. This means both bg-color (from the component) and text-color (from the caller) are applied. This is intentional: it lets component consumers add classes without losing the component's own styles.

You can read more in the SolidJS docs on mergeProps — the key line is: "mergeProps merges potentially reactive objects without losing reactivity, giving special treatment to class, classList, style, and ref."

Case 2: spreading a plain object literal → override (not merge)

const borderColor = { classList: { 'border-color': true } };
<Button classList={{ 'text-color': true }} {...borderColor}>

Here you're spreading a plain non-reactive JS object, not a SolidJS props object. The JSX compiler treats this as a standard JS object spread — classList from borderColor wins (last write wins), so text-color is dropped. mergeProps semantics only apply when SolidJS can detect that the spread is a reactive props/signal object.

Is it reliable? Yes for case 1. The merge behavior on {...props} is stable and documented. It won't change without a major breaking release.

Can you use merge without the parent→child pattern?

Yes — call mergeProps explicitly:

const merged = mergeProps(
  { classList: { 'text-color': true } },
  borderColor
);
<Button {...merged}>

This gives you the same merge semantics anywhere, not just in component bodies.