diff --git a/src/controls/richText/RichText.module.scss b/src/controls/richText/RichText.module.scss
index 748839ea9..118a5eee5 100644
--- a/src/controls/richText/RichText.module.scss
+++ b/src/controls/richText/RichText.module.scss
@@ -105,7 +105,7 @@
   width: 100%;
 }
 
-:global {
+:global(.pnp-richtext-quill-container) {
   .ql-toolbar {
     background-color: transparent;
     color: "[theme:neutralLighterAlt, default:#{$ms-color-neutralLighterAlt}]";
diff --git a/src/controls/richText/RichText.tsx b/src/controls/richText/RichText.tsx
index e4da6a809..1f9367f60 100644
--- a/src/controls/richText/RichText.tsx
+++ b/src/controls/richText/RichText.tsx
@@ -22,6 +22,7 @@ import { initializeIcons } from '@fluentui/react/lib/Icons';
 import { Label } from '@fluentui/react/lib/Label';
 
 const TOOLBARPADDING: number = 28;
+const CONTAINER_CLASS: string = 'pnp-richtext-quill-container';
 /**
  * Creates a rich text editing control that mimics the out-of-the-box
  * SharePoint Rich Text control.
@@ -637,6 +638,7 @@ export class RichText extends React.Component<IRichTextProps, IRichTextState> {
         className={
           css(
             styles.richtext && this.state.editing ? 'ql-active' : null,
+            CONTAINER_CLASS,
             this.props.className || null
           ) || null
         }