diff --git a/packages/react-jss/.size-snapshot.json b/packages/react-jss/.size-snapshot.json
index a65a6cca1..400ae7745 100644
--- a/packages/react-jss/.size-snapshot.json
+++ b/packages/react-jss/.size-snapshot.json
@@ -1,8 +1,8 @@
 {
   "dist/react-jss.js": {
-    "bundled": 109683,
-    "minified": 36814,
-    "gzipped": 11859
+    "bundled": 109703,
+    "minified": 36833,
+    "gzipped": 11871
   },
   "dist/react-jss.min.js": {
     "bundled": 85144,
@@ -10,14 +10,14 @@
     "gzipped": 9685
   },
   "dist/react-jss.cjs.js": {
-    "bundled": 14716,
-    "minified": 6874,
-    "gzipped": 2310
+    "bundled": 14736,
+    "minified": 6893,
+    "gzipped": 2323
   },
   "dist/react-jss.esm.js": {
-    "bundled": 14035,
-    "minified": 6294,
-    "gzipped": 2193,
+    "bundled": 14055,
+    "minified": 6313,
+    "gzipped": 2207,
     "treeshaked": {
       "rollup": {
         "code": 1946,
diff --git a/packages/react-jss/src/withStyles.js b/packages/react-jss/src/withStyles.js
index 2f0577ada..d283a6600 100644
--- a/packages/react-jss/src/withStyles.js
+++ b/packages/react-jss/src/withStyles.js
@@ -65,7 +65,8 @@ export default function withStyles<Theme: {}, S: Styles<Theme>>(
     InnerComponent: ComponentType<Props> = NoRenderer
   ): ComponentType<Props> => {
     const displayName = getDisplayName(InnerComponent)
-    const defaultClassNamePrefix = process.env.NODE_ENV === 'production' ? '' : `${displayName}-`
+    const defaultClassNamePrefix =
+      process.env.NODE_ENV === 'production' ? '' : `${displayName.replace(/\s/g, '-')}-`
     const managerId = managersCounter++
     const manager = new SheetsManager()
     const noTheme = {}
diff --git a/packages/react-jss/src/withStyles.test.js b/packages/react-jss/src/withStyles.test.js
index 7c3bbc0d8..7957d498b 100644
--- a/packages/react-jss/src/withStyles.test.js
+++ b/packages/react-jss/src/withStyles.test.js
@@ -218,10 +218,11 @@ describe('React-JSS: withStyles', () => {
       return `${rule.key}-id`
     }
 
-    const renderTest = () => {
+    const renderTest = (displayName = 'DisplayNameTest') => {
       function DisplayNameTest() {
         return null
       }
+      DisplayNameTest.displayName = displayName
       const MyComponent = withStyles({
         a: {color: 'red'}
       })(DisplayNameTest)
@@ -237,6 +238,11 @@ describe('React-JSS: withStyles', () => {
       expect(classNamePrefix).to.be('DisplayNameTest-')
     })
 
+    it('should handle spaces correctly', () => {
+      renderTest('Display Name Test')
+      expect(classNamePrefix).to.be('Display-Name-Test-')
+    })
+
     it('should pass no prefix in production', () => {
       process.env.NODE_ENV = 'production'
       renderTest()