Blazored
diff --git a/‎docs/docs/styling/custom-overlay.md
+4-4 b/‎docs/docs/styling/custom-overlay.md
+4-4
diff --git a/‎docs/docusaurus.config.js
+3-4 b/‎docs/docusaurus.config.js
+3-4
@@ -3,17 +3,17 @@ sidebar_position: 4
 ---
 
 # Custom Overlay
-The overlay can be customised by providing one or more custom CSS classes to augment or overwrite the default style.
+The overlay can be customised by providing one or more custom CSS classes to augment or overwrite the default style. Note that you may need to add the `!important` keyword to some properties due the the use of scoped CSS, which can create a higher specificity for the default styles.
 
-If you wanted the overlay to be a transparent red you could define the following CSS class.
+The following example shows how to define a CSS class that overrides the default overlay background colour.
 
 ```css title="my-app.css"
 .custom-modal-overlay {
-    background-color: rgba(255, 0, 0, 0.5);
+    background-color: rgba(255, 0, 0, 0.5) !important;
 }
 ```
 
-Then apply that to your modal with either of the following options.
+This can then be applied to your modal with either of the following options.
 
 #### Configuring for all modals
 ```razor
 
@@ -1,8 +1,7 @@
 // @ts-check
 // Note: type annotations allow type checking and IDEs autocompletion
 
-const lightCodeTheme = require('prism-react-renderer/themes/github');
-const darkCodeTheme = require('prism-react-renderer/themes/dracula');
+import {themes as prismThemes} from 'prism-react-renderer';
 
 /** @type {import('@docusaurus/types').Config} */
 const config = {
@@ -90,8 +89,8 @@ const config = {
         copyright: `Copyright © ${new Date().getFullYear()} Blazored`,
       },
       prism: {
-        theme: require('prism-react-renderer/themes/github'),
-        darkTheme: require('prism-react-renderer/themes/vsDark'),
+        theme: prismThemes.github,
+        darkTheme: prismThemes.vsDark,
         additionalLanguages: ['csharp', 'cshtml']
       },
     }),