I have issue with overriding styles from external components in React.
I have for example basic component badge which has own less styles but sometimes I need apply some styles from external component (see below).
I have this approach in whole project (lot of components) and I´am trying find solution for this bcs sometimes it works properly sometimes not. I know that problem with priority of css. I know that I can add “.badgeItem.badgeItem ” in external component but as I said it is in whole project and find any solution which solve this issue (mby any style-loader or something).

Thank you for any help 🙂

badge.tsx

import React from "react";
import styles from "./badge.module.less";
import {cn} from "../../componentUtils";

interface IProps {
    number: number;
    className?: string;
}

export const Badge = (props: IProps) => {
    const {number, className} = props;

    return <div className={cn(styles.badge, className)}>
        {number}
    </div>;
};

badge.module.less

.badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background: red;
  color: white;
  border-radius: 50%;
}

page.tsx

import React from "react";
import styles from "./page.module.less";
import {Badge} from "@/app/components/components/badge/badge";

export const Page = () => {
    return <div>
        <Badge number={456} className={styles.badgeItem} />
    </div>
};

page.module.less

.badgeItem {
  background: yellow;
}