SPFx - CSS for property pane

Question

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.

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

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)

   require("./propertyPane.css");