`class` vs `classList` behaviour

Hello!

Currently doing something like

const InternalInbox = () => {
  const style = useStyle();

  return (
    <div>
      <button class={style("tw-bg-red-500")}>test</button>
    </div>
  );
};

const InternalInbox = () => {
  const style = useStyle();

  return (
    <div>
      <button class={style("tw-bg-red-500")}>test</button>
    </div>
  );
};

const InternalInbox = () => {
  const style = useStyle();

  return (
    <div>
      <button class={style("tw-bg-red-500")}>test</button>
    </div>
  );
};

const InternalInbox = () => {
  const style = useStyle();

  return (
    <div>
      <button class={style("tw-bg-red-500")}>test</button>
    </div>
  );
};

where

useStyle()

useStyle()

useStyle()

useStyle() is just consuming some context and and returning a style function which manipulates the classes based on the context. This seems to not update my class in the DOM after SSR (while I see that the style function runs again on the client.

However, if I use classList ,

`
classList={{[style("tw-bg-red-500")]: true}}

`
classList={{[style("tw-bg-red-500")]: true}}

`
classList={{[style("tw-bg-red-500")]: true}}

`
classList={{[style("tw-bg-red-500")]: true}}

this magically works. Haven't found any issues regarding this. Does it seem like a bug?

No replies yetBe the first to reply to this messageJoin

`class` vs `classList` behaviour

Similar Threads

Similar Threads

Similar Threads