Исправление бага в стилях .modules.sccs в React, typescript проекте
Использовал UI-kit всё работало хорошо. Перешел на node.js 22 обновил все библиотеки.
И теперь неправильно работают .modules.scss стили(приоритет поломался).
Есть такой Компонент:
На его основе сделал элемент:
Почему то у .Flex приоритет выше.
Может кто сталкивался или сможет помочь решить эту проблему
И теперь неправильно работают .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" }
Может кто сталкивался или сможет помочь решить эту проблему