Использовал UI-kit всё работало хорошо. Перешел на node.js 22 обновил все библиотеки.

И теперь неправильно работают .modules.scss стили(приоритет поломался).

Есть такой Компонент:

export const Flex = (props: FlexProps) => {
const {
className,
children,
justify = 'start',
align = 'center',
direction = 'row',
wrap = 'nowrap',
gap,
max,
...otherProps
} = props;

const classes = [
className,
justifyClasses[justify],
alignClasses[align],
directionClasses[direction],
cls[wrap],
gap && gapClasses[gap],
];

const mods: Mods = {
[cls.max]: max,
};

return (
<div className={classNames(cls.Flex, mods, classes)} {...otherProps}>
{children}
</div>
);
};
.Flex {
display: flex;
position: relative;
z-index: 1;
}

На его основе сделал элемент:
<Flex className={classNames(cls.Appbar, {}, [])}></Flex

.Appbar {
position: fixed;
top: 0;
width: 100%;
z-index: 100;
padding: 10px 40px;
} Раньше в предыдущий проектах стили применялись корректно, а именно приоритет у стиля .Appbar был выше и поэтому position был fixed. А сейчас стили применяются неправильно(смотреть скрин)


Почему то у .Flex приоритет выше.

"dependencies": {
"i18next": "^24.2.1",
"i18next-browser-languagedetector": "^8.0.2",
"i18next-http-backend": "^3.0.1",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-i18next": "^15.4.0",
"react-router-dom": "^7.1.3"
},
"devDependencies": {
"@eslint/js": "^9.17.0",
"@types/react": "^18.3.18",
"@types/react-dom": "^18.3.5",
"@vitejs/plugin-react": "^4.3.4",
"autoprefixer": "^10.4.20",
"eslint": "^9.17.0",
"eslint-plugin-react-hooks": "^5.0.0",
"eslint-plugin-react-refresh": "^0.4.16",
"globals": "^15.14.0",
"mini-css-extract-plugin": "^2.9.2",
"postcss": "^8.5.1",
"sass": "^1.83.4",
"stylelint": "^16.14.1",
"stylelint-config-standard-scss": "^14.0.0",
"tsx": "^4.19.2",
"typescript": "~5.6.2",
"typescript-eslint": "^8.18.2",
"vite": "^6.0.5",
"vite-plugin-svgr": "^4.3.0"
}

Может кто сталкивался или сможет помочь решить эту проблему