diff --git a/packages/vkui/src/hooks/useSyncHTMLWithBaseVKUIClasses.ts b/packages/vkui/src/hooks/useSyncHTMLWithBaseVKUIClasses.ts index 6d30a818380..848116bf263 100644 --- a/packages/vkui/src/hooks/useSyncHTMLWithBaseVKUIClasses.ts +++ b/packages/vkui/src/hooks/useSyncHTMLWithBaseVKUIClasses.ts @@ -19,12 +19,18 @@ export function useSyncHTMLWithBaseVKUIClasses({ const htmlElement = appRootRef.current?.ownerDocument.documentElement; const parentElement = appRootRef.current?.parentElement ?? null; + const parentElementClasses = ['vkui__root']; + + if (mode === 'embedded') { + parentElementClasses.push('vkui__root--embedded'); + } + if (mode === 'full') { /* eslint-disable-next-line no-restricted-properties */ htmlElement?.classList.add('vkui'); } /* eslint-disable-next-line no-restricted-properties */ - parentElement?.classList.add('vkui__root'); + parentElement?.classList.add(...parentElementClasses); return () => { if (mode === 'full') { @@ -32,7 +38,7 @@ export function useSyncHTMLWithBaseVKUIClasses({ htmlElement?.classList.remove('vkui'); } /* eslint-disable-next-line no-restricted-properties */ - parentElement?.classList.remove('vkui__root'); + parentElement?.classList.remove(...parentElementClasses); }; - }, []); + }, [mode, enable]); } diff --git a/packages/vkui/src/styles/common.css b/packages/vkui/src/styles/common.css index a8b6d6b9da3..8603e4a12a8 100644 --- a/packages/vkui/src/styles/common.css +++ b/packages/vkui/src/styles/common.css @@ -26,6 +26,9 @@ padding: 0; block-size: 100%; color-scheme: var(--vkui--colors_scheme); +} + +.vkui { /* * TODO [>=8]: Убрать background с html элемента, но для этого надо * чтобы height у всех родителей Panel вплоть до html имели @@ -42,6 +45,10 @@ max-block-size: inherit; } +.vkui__root--embedded { + background: var(--vkui--color_background); +} + /* отключаем нативный pull-to-refresh при взаимодействии с компонентом * PullToRefresh или при открывании модалки */ .vkui--disable-overscroll-behavior {