I want to add below CSS in SPFx web-part using states. But unable to do it:

    display: none;
  • 1
    try this blog.kloud.com.au/2019/05/15/… Nov 19, 2019 at 10:10
  • What do you mean by "using states"?? Nov 19, 2019 at 10:21
  • react states but its not necessary but like to implement inline css in react.js
    – kumar
    Nov 19, 2019 at 10:47
  • can we check this class by name of page if div[class^='pageTitle_'] =Home display none or show
    – kumar
    Nov 22, 2019 at 5:25

3 Answers 3


Create a file , let's say customCSS.css inside your component folder and paste the below code :

  display: none ;

Now in your main .ts file call this css file with the following syntax on top of the code :


Let me know if this helps.

  • thanks but i want to add inlince css within reactjs is it possible
    – kumar
    Nov 19, 2019 at 12:27
  • You need to hide the title from modern page using inline css ?
    – Ravi
    Nov 19, 2019 at 12:44
  • yes i need it but it affect other pages as well so thought of hiding set css inline
    – kumar
    Nov 19, 2019 at 12:48
  • this will not impact the other pages, it will impact only on the page where webpart is inserted. I did not come across any way to do it with inline css.
    – Ravi
    Nov 19, 2019 at 14:06
  • ok i removed module.scss file and added custom.css but geetin error for @import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore';
    – kumar
    Nov 19, 2019 at 14:14

You could add the CSS at end of your webpart .scss file. enter image description here

enter image description here

  • yes it is working but if i navigate to another page from navigation same css apply there and hide my title until i refresh it manually any idea why thi behaviour
    – kumar
    Nov 20, 2019 at 3:01

You have several solutions, by injecting additional routines in the OnInit or ComponentWillMount method.

One mentioned in comments by @Karthik, by using in your code the utility SPComponentLoader.loadCss with an external file.

The second it’s adding inline CSS into the head of the current page such as this sample: https://github.com/SharePoint/sp-dev-fx-extensions/blob/master/samples/react-application-injectcss/src/extensions/injectCss/InjectCssApplicationCustomizer.ts

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.