diff --git a/packages/@mantine/core/src/components/Portal/Portal.test.tsx b/packages/@mantine/core/src/components/Portal/Portal.test.tsx
index d303c70e67c..c5c39f99146 100644
--- a/packages/@mantine/core/src/components/Portal/Portal.test.tsx
+++ b/packages/@mantine/core/src/components/Portal/Portal.test.tsx
@@ -25,4 +25,16 @@ describe('@mantine/core/Portal', () => {
it('has correct displayName', () => {
expect(Portal.displayName).toStrictEqual('@mantine/core/Portal');
});
+
+ it('syncs its className to the generated Portal node', () => {
+ render(test-portal);
+ const portal = document.querySelector('[data-portal]')!;
+ expect(portal.classList).toContain('test-portal');
+ });
+
+ it('does not crash when className is empty or contains extra spaces', () => {
+ render(empty-className);
+ render(className-with-spaces);
+ expect(document.querySelectorAll('[data-portal]')).toHaveLength(2);
+ });
});
diff --git a/packages/@mantine/core/src/components/Portal/Portal.tsx b/packages/@mantine/core/src/components/Portal/Portal.tsx
index a8917f9f66d..57ab61628db 100644
--- a/packages/@mantine/core/src/components/Portal/Portal.tsx
+++ b/packages/@mantine/core/src/components/Portal/Portal.tsx
@@ -6,7 +6,8 @@ import { useProps } from '../../core';
function createPortalNode(props: React.ComponentPropsWithoutRef<'div'>) {
const node = document.createElement('div');
node.setAttribute('data-portal', 'true');
- typeof props.className === 'string' && node.classList.add(...props.className.split(' '));
+ typeof props.className === 'string' &&
+ node.classList.add(...props.className.split(' ').filter(Boolean));
typeof props.style === 'object' && Object.assign(node.style, props.style);
typeof props.id === 'string' && node.setAttribute('id', props.id);
return node;