I've created a SPFx web part called "Human Resources Announcements." However, the name is too long for the property pane title to hold all of its value in one line.

enter image description here

How would I add custom CSS to the property pane?

I've tried adding to the .scss file for my web part

.propertyPane {
  .propertyPanePageTitle {
    font-size: $ms-font-size-m;

but this doesn't do anything

1 Answer 1


I had similiar issue with the FabricUI:Dialog. The CSS will be overwritten or ignored. I ended up to use a "normal" css file and overwrite the css in the "traditional" way ;-)

  1. Add a normal css file to your project (e.g. propertyPane.css under /components)
  2. Add your CSS without the Class-Wrapper

    .propertyPanePageTitle { font-size: /* you have to use normal css */; }

  3. include the CSS-file into your project (e.g. HumanResourcesAnnouncements.tsx)


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.