diff --git a/src/DockPanel.tsx b/src/DockPanel.tsx
index 12b4d1f4..bac87a3d 100644
--- a/src/DockPanel.tsx
+++ b/src/DockPanel.tsx
@@ -7,6 +7,7 @@ import {DockDropLayer} from "./DockDropLayer";
 import {getFloatPanelSize, nextZIndex} from "./Algorithm";
 import {DockDropEdge} from "./DockDropEdge";
 import {groupClassNames} from "./Utils";
+import classNames from "classnames";
 
 interface Props {
   panelData: PanelData;
@@ -278,7 +279,7 @@ export class DockPanel extends React.PureComponent<Props, State> {
         heightFlex = panelHeightFlex;
       }
     }
-    let panelClass: string = groupClassNames(styleName)
+    let panelClass: string = classNames(groupClassNames(styleName))
     let isMax = parent?.mode === 'maximize';
     let isFloat = parent?.mode === 'float';
     let isHBox = parent?.mode === 'horizontal';
diff --git a/src/DockTabs.tsx b/src/DockTabs.tsx
index 99dbe573..e24ab3c2 100644
--- a/src/DockTabs.tsx
+++ b/src/DockTabs.tsx
@@ -10,6 +10,7 @@ import DockTabPane from "./DockTabPane";
 import {getFloatPanelSize} from "./Algorithm";
 import {WindowBox} from "./WindowBox";
 import {groupClassNames} from "./Utils";
+import classNames from "classnames";
 
 function findParentPanel(element: HTMLElement) {
   for (let i = 0; i < 10; ++i) {
@@ -329,7 +330,7 @@ export class DockTabs extends React.PureComponent<Props> {
             renderTabBar={this.renderTabBar}
             activeKey={activeId}
             onChange={this.onTabChange}
-            popupClassName={groupClassNames(group)}
+            popupClassName={classNames(groupClassNames(group))}
       >
         {children}
       </Tabs>
diff --git a/src/Utils.ts b/src/Utils.ts
index 73c2bae5..eb72f999 100644
--- a/src/Utils.ts
+++ b/src/Utils.ts
@@ -1,4 +1,5 @@
-export const groupClassNames = (groupName: string = '', classes: string[] = []) =>
-  (groupName.split(' ').map((name) => `dock-style-${name}`) ?? [])
-    .concat(classes)
-    .join(' ');
+export const groupClassNames = (groupNames: string = ''): string[] =>
+  groupNames
+    .split(' ')
+    .filter((value) => value !== '')
+    .map((name) => `dock-style-${name}`);
diff --git a/src/dragdrop/DragManager.ts b/src/dragdrop/DragManager.ts
index 9668e9d0..33c34400 100644
--- a/src/dragdrop/DragManager.ts
+++ b/src/dragdrop/DragManager.ts
@@ -1,3 +1,4 @@
+import classNames from "classnames";
 import {groupClassNames} from "../Utils";
 
 export type DragType = 'left' | 'right' | 'touch';
@@ -205,7 +206,7 @@ function _createDraggingDiv(doc: Document) {
 
   const tabGroup = (_data && 'tabGroup' in _data ? _data['tabGroup'] : undefined) as string | undefined;
 
-  _draggingDiv.className = groupClassNames(tabGroup, ['dragging-layer']);
+  _draggingDiv.className = classNames(groupClassNames(tabGroup), 'dragging-layer');
 
   _draggingDiv.appendChild(document.createElement('div')); // place holder for dragging element
   _draggingDiv.appendChild(_draggingIcon);