fix: change root element var

gravity-ui · Nov 22, 2023 · d041c19 · d041c19
1 parent 48daab3
commit d041c19
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 8 deletions.
diff --git a/src/components/AsideHeader/AsideHeader.scss b/src/components/AsideHeader/AsideHeader.scss
@@ -2,10 +2,6 @@
 
 $block: '.#{variables.$ns}aside-header';
 
-:root {
-    --gn-aside-top-panel-height: 0px;
-}
-
 .g-root {
     --gn-aside-header-background-color: var(--g-color-base-warning-light);
     --gn-aside-header-collapse-button-divider-line-color: var(
@@ -14,6 +10,8 @@ $block: '.#{variables.$ns}aside-header';
     --gn-aside-header-footer-item-icon-color: var(--g-color-text-primary);
     --gn-aside-header-subheader-item-icon-color: var(--g-color-text-primary);
     --gn-aside-header-item-icon-background-size: 38px;
+
+    --gn-aside-top-panel-height: 0px;
 }
 
 .g-root_theme_light,

diff --git a/src/components/AsideHeader/useAsideHeaderTopPanel.tsx b/src/components/AsideHeader/useAsideHeaderTopPanel.tsx
@@ -8,6 +8,8 @@ type AsideHeaderTopPanel = {
     updateTopSize: () => void;
 };
 
+const G_ROOT_CLASS_NAME = 'g-root';
+
 const useRefHeight = (ref: React.RefObject<HTMLDivElement>) => {
     const [topHeight, setTopHeight] = React.useState(0);
     React.useEffect(() => {
@@ -28,10 +30,10 @@ export const useAsideHeaderTopPanel = ({
     const topHeight = useRefHeight(topRef);
 
     const setAsideTopPanelHeight = React.useCallback((clientHeight: number) => {
-        document.documentElement.style.setProperty(
-            '--gn-aside-top-panel-height',
-            clientHeight + 'px',
-        );
+        const gRootElement = document
+            .getElementsByClassName(G_ROOT_CLASS_NAME)
+            .item(0) as HTMLElement | null;
+        gRootElement?.style.setProperty('--gn-aside-top-panel-height', clientHeight + 'px');
     }, []);
 
     const updateTopSize = React.useCallback(() => {