Переопределение стилей из внешних реквизитов ⇐ CSS

[Anonymous]

У меня возникла проблема с переопределением стилей внешних компонентов в React. У меня есть базовый значок компонента, который имеет свои собственные стили, но иногда мне нужно применить некоторые стили из внешнего компонента (см. ниже).
Я использую этот подход во всем проекте (много компоненты), и я пытаюсь найти решение этой проблемы, потому что иногда оно работает правильно, а иногда нет. Я знаю эту проблему с приоритетом CSS. Я знаю, что могу добавить .badgeItem.badgeItem во внешний компонент, но, как я уже сказал, это во всем проекте и найти любое решение, которое решит эту проблему (возможно, загрузчик стилей или что-то в этом роде).
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
{number}
;
};

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


};

page.module.less
.badgeItem {
background: yellow;
}


Подробнее здесь: https://stackoverflow.com/questions/785 ... rnal-props