diff --git a/css/_keyboard-shortcuts.scss b/css/_keyboard-shortcuts.scss
deleted file mode 100644
index 4700280a5..000000000
--- a/css/_keyboard-shortcuts.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-.shortcuts-list {
-    list-style-type: none;
-    padding: 0;
-
-    &__item {
-        display: flex;
-        justify-content: space-between;
-        margin-bottom: em(7, 14);
-    }
-}
diff --git a/css/main.scss b/css/main.scss
index 757272a22..e71598759 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -57,7 +57,6 @@ $flagsImagePath: "../images/";
 @import 'welcome_page_content';
 @import 'welcome_page_settings_toolbar';
 @import 'toolbars';
-@import 'keyboard-shortcuts';
 @import 'redirect_page';
 @import 'components/form-control';
 @import 'components/link';
diff --git a/react/features/keyboard-shortcuts/components/KeyboardShortcutsDialog.web.js b/react/features/keyboard-shortcuts/components/KeyboardShortcutsDialog.web.js
index 10851c13b..596516529 100644
--- a/react/features/keyboard-shortcuts/components/KeyboardShortcutsDialog.web.js
+++ b/react/features/keyboard-shortcuts/components/KeyboardShortcutsDialog.web.js
@@ -1,6 +1,8 @@
 /* @flow */
 
 import Lozenge from '@atlaskit/lozenge';
+import { withStyles } from '@material-ui/core/styles';
+import clsx from 'clsx';
 import React, { Component } from 'react';
 
 import { Dialog } from '../../base/dialog';
@@ -12,6 +14,11 @@ import { translate } from '../../base/i18n';
  */
 type Props = {
 
+    /**
+     * An object containing the CSS classes.
+     */
+    classes: Object,
+
     /**
      * A Map with keyboard keys as keys and translation keys as values.
      */
@@ -23,6 +30,28 @@ type Props = {
     t: Function
 };
 
+/**
+ * Creates the styles for the component.
+ *
+ * @param {Object} theme - The current UI theme.
+ *
+ * @returns {Object}
+ */
+const styles = theme => {
+    return {
+        list: {
+            listStyleType: 'none',
+            padding: 0,
+
+            '& .shortcuts-list__item': {
+                display: 'flex',
+                justifyContent: 'space-between',
+                marginBottom: theme.spacing(2)
+            }
+        }
+    };
+};
+
 /**
  * Implements a React {@link Component} which displays a dialog describing
  * registered keyboard shortcuts.
@@ -49,7 +78,7 @@ class KeyboardShortcutsDialog extends Component<Props> {
                 <div
                     id = 'keyboard-shortcuts'>
                     <ul
-                        className = 'shortcuts-list'
+                        className = { clsx('shortcuts-list', this.props.classes.list) }
                         id = 'keyboard-shortcuts-list'>
                         { shortcuts }
                     </ul>
@@ -96,4 +125,4 @@ class KeyboardShortcutsDialog extends Component<Props> {
     }
 }
 
-export default translate(KeyboardShortcutsDialog);
+export default translate(withStyles(styles)(KeyboardShortcutsDialog));