diff --git a/es/DockPanel.js b/es/DockPanel.js
index 20941b35..af11ef6c 100644
--- a/es/DockPanel.js
+++ b/es/DockPanel.js
@@ -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";
 export class DockPanel extends React.PureComponent {
     constructor() {
         super(...arguments);
@@ -249,7 +250,7 @@ export class DockPanel extends React.PureComponent {
                 heightFlex = panelHeightFlex;
             }
         }
-        let panelClass = groupClassNames(styleName);
+        let panelClass = classNames(groupClassNames(styleName));
         let isMax = (parent === null || parent === void 0 ? void 0 : parent.mode) === 'maximize';
         let isFloat = (parent === null || parent === void 0 ? void 0 : parent.mode) === 'float';
         let isHBox = (parent === null || parent === void 0 ? void 0 : parent.mode) === 'horizontal';
diff --git a/es/DockTabs.js b/es/DockTabs.js
index cac314b1..e67422ba 100644
--- a/es/DockTabs.js
+++ b/es/DockTabs.js
@@ -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) {
     for (let i = 0; i < 10; ++i) {
         if (!element) {
@@ -255,7 +256,7 @@ export class DockTabs extends React.PureComponent {
         for (let [id, tab] of this._cache) {
             children.push(tab.content);
         }
-        return (React.createElement(Tabs, { prefixCls: "dock", moreIcon: moreIcon, animated: animated, renderTabBar: this.renderTabBar, activeKey: activeId, onChange: this.onTabChange, popupClassName: groupClassNames(group) }, children));
+        return (React.createElement(Tabs, { prefixCls: "dock", moreIcon: moreIcon, animated: animated, renderTabBar: this.renderTabBar, activeKey: activeId, onChange: this.onTabChange, popupClassName: classNames(groupClassNames(group)) }, children));
     }
 }
 DockTabs.contextType = DockContextType;
diff --git a/es/Utils.d.ts b/es/Utils.d.ts
index f63cbeb0..86842e89 100644
--- a/es/Utils.d.ts
+++ b/es/Utils.d.ts
@@ -1 +1 @@
-export declare const groupClassNames: (groupName?: string, classes?: string[]) => string;
+export declare const groupClassNames: (groupNames?: string) => string[];
diff --git a/es/Utils.js b/es/Utils.js
index a951746b..15de6ce2 100644
--- a/es/Utils.js
+++ b/es/Utils.js
@@ -1,6 +1,4 @@
-export const groupClassNames = (groupName = '', classes = []) => {
-    var _a;
-    return ((_a = groupName.split(' ').map((name) => `dock-style-${name}`)) !== null && _a !== void 0 ? _a : [])
-        .concat(classes)
-        .join(' ');
-};
+export const groupClassNames = (groupNames = '') => groupNames
+    .split(' ')
+    .filter((value) => value !== '')
+    .map((name) => `dock-style-${name}`);
diff --git a/es/dragdrop/DragManager.js b/es/dragdrop/DragManager.js
index ded39ae8..ab076639 100644
--- a/es/dragdrop/DragManager.js
+++ b/es/dragdrop/DragManager.js
@@ -1,3 +1,4 @@
+import classNames from "classnames";
 import { groupClassNames } from "../Utils";
 export class DragState {
     constructor(event, component, init = false) {
@@ -151,7 +152,7 @@ function _createDraggingDiv(doc) {
     _draggingDiv = doc.createElement('div');
     _draggingIcon = doc.createElement('div');
     const tabGroup = (_data && 'tabGroup' in _data ? _data['tabGroup'] : 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);
 }
diff --git a/lib/DockPanel.js b/lib/DockPanel.js
index 2c463d3a..dbacf0b5 100644
--- a/lib/DockPanel.js
+++ b/lib/DockPanel.js
@@ -18,6 +18,9 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DockPanel = void 0;
 const React = __importStar(require("react"));
@@ -29,6 +32,7 @@ const DockDropLayer_1 = require("./DockDropLayer");
 const Algorithm_1 = require("./Algorithm");
 const DockDropEdge_1 = require("./DockDropEdge");
 const Utils_1 = require("./Utils");
+const classnames_1 = __importDefault(require("classnames"));
 class DockPanel extends React.PureComponent {
     constructor() {
         super(...arguments);
@@ -271,7 +275,7 @@ class DockPanel extends React.PureComponent {
                 heightFlex = panelHeightFlex;
             }
         }
-        let panelClass = Utils_1.groupClassNames(styleName);
+        let panelClass = classnames_1.default(Utils_1.groupClassNames(styleName));
         let isMax = (parent === null || parent === void 0 ? void 0 : parent.mode) === 'maximize';
         let isFloat = (parent === null || parent === void 0 ? void 0 : parent.mode) === 'float';
         let isHBox = (parent === null || parent === void 0 ? void 0 : parent.mode) === 'horizontal';
diff --git a/lib/DockTabs.js b/lib/DockTabs.js
index 65170a93..cac3060d 100644
--- a/lib/DockTabs.js
+++ b/lib/DockTabs.js
@@ -35,6 +35,7 @@ const DockTabPane_1 = __importDefault(require("./DockTabPane"));
 const Algorithm_1 = require("./Algorithm");
 const WindowBox_1 = require("./WindowBox");
 const Utils_1 = require("./Utils");
+const classnames_1 = __importDefault(require("classnames"));
 function findParentPanel(element) {
     for (let i = 0; i < 10; ++i) {
         if (!element) {
@@ -281,7 +282,7 @@ class DockTabs extends React.PureComponent {
         for (let [id, tab] of this._cache) {
             children.push(tab.content);
         }
-        return (React.createElement(rc_tabs_1.default, { prefixCls: "dock", moreIcon: moreIcon, animated: animated, renderTabBar: this.renderTabBar, activeKey: activeId, onChange: this.onTabChange, popupClassName: Utils_1.groupClassNames(group) }, children));
+        return (React.createElement(rc_tabs_1.default, { prefixCls: "dock", moreIcon: moreIcon, animated: animated, renderTabBar: this.renderTabBar, activeKey: activeId, onChange: this.onTabChange, popupClassName: classnames_1.default(Utils_1.groupClassNames(group)) }, children));
     }
 }
 exports.DockTabs = DockTabs;
diff --git a/lib/Utils.d.ts b/lib/Utils.d.ts
index f63cbeb0..86842e89 100644
--- a/lib/Utils.d.ts
+++ b/lib/Utils.d.ts
@@ -1 +1 @@
-export declare const groupClassNames: (groupName?: string, classes?: string[]) => string;
+export declare const groupClassNames: (groupNames?: string) => string[];
diff --git a/lib/Utils.js b/lib/Utils.js
index cb6e0abb..a6bd0659 100644
--- a/lib/Utils.js
+++ b/lib/Utils.js
@@ -1,10 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.groupClassNames = void 0;
-const groupClassNames = (groupName = '', classes = []) => {
-    var _a;
-    return ((_a = groupName.split(' ').map((name) => `dock-style-${name}`)) !== null && _a !== void 0 ? _a : [])
-        .concat(classes)
-        .join(' ');
-};
+const groupClassNames = (groupNames = '') => groupNames
+    .split(' ')
+    .filter((value) => value !== '')
+    .map((name) => `dock-style-${name}`);
 exports.groupClassNames = groupClassNames;
diff --git a/lib/dragdrop/DragManager.js b/lib/dragdrop/DragManager.js
index e9bbb179..9fbb36d0 100644
--- a/lib/dragdrop/DragManager.js
+++ b/lib/dragdrop/DragManager.js
@@ -1,6 +1,10 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.removeDragStateListener = exports.addDragStateListener = exports.destroyDraggingElement = exports.removeHandlers = exports.addHandlers = exports.isDragging = exports.DragState = void 0;
+const classnames_1 = __importDefault(require("classnames"));
 const Utils_1 = require("../Utils");
 class DragState {
     constructor(event, component, init = false) {
@@ -158,7 +162,7 @@ function _createDraggingDiv(doc) {
     _draggingDiv = doc.createElement('div');
     _draggingIcon = doc.createElement('div');
     const tabGroup = (_data && 'tabGroup' in _data ? _data['tabGroup'] : undefined);
-    _draggingDiv.className = Utils_1.groupClassNames(tabGroup, ['dragging-layer']);
+    _draggingDiv.className = classnames_1.default(Utils_1.groupClassNames(tabGroup), 'dragging-layer');
     _draggingDiv.appendChild(document.createElement('div')); // place holder for dragging element
     _draggingDiv.appendChild(_draggingIcon);
 }
diff --git a/package.json b/package.json
index 7fadd057..9210f87c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rc-dock",
-  "version": "3.2.16",
+  "version": "3.2.17",
   "description": "dock layout for react component",
   "repository": {
     "type": "git",