0

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

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

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

div[class^='pageTitle_']{
  display: none ;
}

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

require("../../webparts/WebpartName/components/customCSS.css");

Let me know if this helps.

  • thanks but i want to add inlince css within reactjs is it possible – kumar Nov 19 '19 at 12:27
  • You need to hide the title from modern page using inline css ? – Ravi Nov 19 '19 at 12:44
  • yes i need it but it affect other pages as well so thought of hiding set css inline – kumar Nov 19 '19 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 '19 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 '19 at 14:14
1

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 '19 at 3:01
0

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, privacy policy and cookie policy

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