:bug: fix: Dynamically setting className on Baloise React components removes default styles (@baloise/ds-react)

[glennverschooren]

Current Behavior

When dynamically setting the className prop on a Baloise React component (e.g., BalCard), the component loses its default styles and only applies the custom classes. This happens when the class is updated after an event (e.g., button click). The expected behavior is that custom classes should be merged with the component’s default classes, not replace them.

import "@baloise/ds-styles/css/all.css";
import "./styles.css";
import { BalCard, BalButton } from "@baloise/ds-react";
import { useState } from "react";

export default function App() {
  const [customClassNames, setCustomClassNames] = useState<string>("bg-green");

  const updateCustomClassNames = () => {
    setCustomClassNames("bg-red p-large");
  };

  return (
    <div className="App">
      <div className="container pt-large">
        <BalCard className={customClassNames}>hellooo</BalCard>
        <BalButton
          onClick={updateCustomClassNames}
          className={customClassNames}
        >
          Text button
        </BalButton>
      </div>
    </div>
  );
}

Expected Behavior

Custom classes should be merged with the component’s default classes. For example, after updating the class, should still have its rounded border and default layout, in addition to the new background color and padding.

Steps to Reproduce

1. Render a Baloise component (e.g., ) with a custom className.
2. Update the className dynamically (e.g., after clicking a button).
3. Observe that the component loses its default styles (e.g., rounded borders, layout).

Version

19.8.2

Browsers

Chrome

Device

Desktop

Code Reproduction URL

https://codesandbox.io/p/sandbox/c53gsl

Additional Information

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[hirsch88]

Hi @glennverschooren

I found a workaround until this fixed in the lit library.

function App() {
  const cardRef = useRef<HTMLElement>(null)

  const change = () => {
    cardRef.current?.classList.add('p-large', 'bg-purple')
  }

  return (
    <BalApp className="has-sticky-footer">
      <main className="container py-normal">
        <BalCard ref={cardRef as any}>helloooo</BalCard>
        <button className="button is-primary is-large" onClick={change}>
          change
        </button>
      </main>
    </BalApp>
  )
}

I also checked Angular and there the classes get merged.