How to add global style in sharepoint framework(SPFx)?

Question

I am looking for a option to hide the header globally. So, is there any way to add styles globally in sharepoint framework.

Note: Opted Reactjs to build we parts.

Answer 1

You could create a Application Customizer to hide the element for modern view globally.

Use jQuery in SPFx

My test result.

$(document).ready(() => {
                  $("span:contains('Office 365')").css('display','none');
                })

Answer 2

I would inject a custom CSS stylesheet using an application customerizer.

Here the code to inject your custom CSS: https://github.com/hugoabernier/react-application-injectcss

Here is an article I wrote that explains how to do it: https://tahoeninjas.blog/2018/05/08/inject-custom-css-on-sharepoint-modern-pages-using-spfx-extensions/

The article explains why you should be careful with such customizations.

Let me know if you need help with the CSS.