diff --git a/packages/x-components/src/components/base-teleport.vue b/packages/x-components/src/components/base-teleport.vue
index 1043a3f6fb..8a84f25c3f 100644
--- a/packages/x-components/src/components/base-teleport.vue
+++ b/packages/x-components/src/components/base-teleport.vue
@@ -114,6 +114,10 @@ export default defineComponent({
       }
       const position = props.position === 'onlychild' ? 'beforeend' : props.position
       targetElement.value.insertAdjacentElement(position, teleportHost.value)
+
+      if (props.position === 'onlychild') {
+        targetElement.value.className += ' x-base-teleport-parent--onlychild'
+      }
     })
 
     /* Update the host inline styles when it changes */
@@ -173,8 +177,7 @@ export default defineComponent({
 /** Teleport host styles should be injected outside our shadowRoots */
 if (typeof document !== 'undefined') {
   const css = document.createElement('style')
-  css.textContent =
-    ':has(> .x-base-teleport--onlychild) > *:not(.x-base-teleport) { display: none; }'
+  css.textContent = `.x-base-teleport-parent--onlychild > *:not(.x-base-teleport) { display: none; }`
   document.head?.appendChild(css) ||
     document.addEventListener('DOMContentLoaded', () => document.head.appendChild(css))
 }