ru24.pro
Работа
Февраль
2025
1 2 3 4 5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

Исправление бага в стилях .modules.sccs в React, typescript проекте

0
Использовал 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"
}

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