[FilePicker] Golbal quill styles from FilePicker overwrite other quill editors

[ffischer06]

Category

[ ] Enhancement

[x ] Bug

[ ] Question

Version

Please specify what version of the library you are using: [ 3.21.0 ]

Expected / Desired Behavior / Question

When using the filepicker i would expect the quill styling to only apply to the quill components used inside of the filepicker or libary. It shouldn't set/overwrite quill styling classes globaly.

Observed Behavior

I use the Filepicker component and another libary which also uses react-quill. When i add the filepicker component to my code the quill toolbar from the second libary is suddenly hidden with display set to none.
The FilePicker component in @pnp/spfx-controls-react applies global styles to the .ql-toolbar class using :global in its SCSS (also other quill classes are overwritten). This causes unintended side effects in projects where other react-quill editors are used, because the toolbar is hidden (display: none) globally for unrelated quill editors.
The styling comes from src\controls\richText\RichText.module.scss
:global {
.ql-toolbar {
background-color: transparent;
color: "[theme:neutralLighterAlt, default:#{$ms-color-neutralLighterAlt}]";
border: none;
display: none;
...

Steps to Reproduce

Use the react-quill libary in your project and add the filepicker component ->global styling from filepicker gets applied to the unrelated react-quill.

Thanks!

[github-actions]

Thank you for submitting your first issue to this project.

[AJIXuMuK]

@ffischer06 - I have made the changes. Could you please verify on your end that the issue is fixed in beta version?
Thanks!

[ffischer06]

@AJIXuMuK - This fixed the issue. Thanks!