diff --git a/src/Definition/PatternDefinition.php b/src/Definition/PatternDefinition.php
index 07bf07c2..a48ef218 100644
--- a/src/Definition/PatternDefinition.php
+++ b/src/Definition/PatternDefinition.php
@@ -65,7 +65,10 @@ public function __construct(array $definition = []) {
     $this->id = $this->definition['id'];
     $this->setFields($this->definition['fields']);
     $this->setVariants($this->definition['variants']);
-    $this->setThemeHook(self::PATTERN_PREFIX . $this->id());
+    // As we now allow hyphens in pattern IDs we need to turn them into
+    // underscores when setting the theme hook.
+    $hook_friendly_id = str_replace('-', '_', $this->id());
+    $this->setThemeHook(self::PATTERN_PREFIX . $hook_friendly_id);
 
     if (!empty($definition['theme hook'])) {
       $this->setThemeHook($definition['theme hook']);
diff --git a/tests/modules/ui_patterns_render_test/templates/pattern-foo-bar.html.twig b/tests/modules/ui_patterns_render_test/templates/pattern-foo-bar.html.twig
index 76c7ac2d..3e17bead 100644
--- a/tests/modules/ui_patterns_render_test/templates/pattern-foo-bar.html.twig
+++ b/tests/modules/ui_patterns_render_test/templates/pattern-foo-bar.html.twig
@@ -1 +1 @@
-Foo Bar
+Foo Bar default template
diff --git a/tests/src/Functional/UiPatternsPreviewRenderTest.php b/tests/src/Functional/UiPatternsPreviewRenderTest.php
index 9d93928f..53aaa17b 100644
--- a/tests/src/Functional/UiPatternsPreviewRenderTest.php
+++ b/tests/src/Functional/UiPatternsPreviewRenderTest.php
@@ -59,6 +59,19 @@ public function testPatternPreviewSuggestions() {
     foreach ($suggestions as $suggestion) {
       $assert_session->responseContains($suggestion);
     }
+
+    // Pattern foo-bar default template is loaded.
+    $assert_session->pageTextContains('Foo Bar default template');
+    $assert_session->pageTextNotContains('Foo Bar overridden template');
+
+    // Install test theme to load template(s) overrides.
+    $this->container->get('theme_installer')->install(['ui_patterns_theme_test']);
+    $this->container->get('theme_handler')->setDefault('ui_patterns_theme_test');
+    $this->container->set('theme.registry', NULL);
+
+    $this->drupalGet('/patterns');
+    $assert_session->pageTextContains('Foo Bar overridden template');
+    $assert_session->pageTextNotContains('Foo Bar default template');
   }
 
 }
diff --git a/tests/themes/ui_patterns_theme_test/pattern-foo-bar--variant-default--preview.html.twig b/tests/themes/ui_patterns_theme_test/pattern-foo-bar--variant-default--preview.html.twig
new file mode 100644
index 00000000..d59b82f0
--- /dev/null
+++ b/tests/themes/ui_patterns_theme_test/pattern-foo-bar--variant-default--preview.html.twig
@@ -0,0 +1 @@
+Foo Bar overridden template
diff --git a/tests/themes/ui_patterns_theme_test/ui_patterns_theme_test.info.yml b/tests/themes/ui_patterns_theme_test/ui_patterns_theme_test.info.yml
new file mode 100644
index 00000000..d1087c79
--- /dev/null
+++ b/tests/themes/ui_patterns_theme_test/ui_patterns_theme_test.info.yml
@@ -0,0 +1,4 @@
+name: 'UI Patterns Test theme'
+type: theme
+description: 'Theme for testing UI Patterns features in action on a theme.'
+core: 8.x