Fluentui: No good way to override header margins in Panel

[JoshuaKGoldberg]

Bug Report

• __Package version(s)__:
• `"office-ui-fabric-react": "6.30.0"

Priorities and help requested:

Are you willing to submit a PR to fix? No

Requested priority: Normal

Products/sites affected: Sway

Describe the issue:

There is a lot of margin above the header in Panels:

We'd like to be able to provide a class or style that reduces the amount of margin-top above the header.
+1 for using a lot of whitespace 😊 but we'd like to fit more into the panel.

Actual behavior:

There is a headerClassName: string in IPanelProps but providing a margin or margin-top there can get overridden by the generated, coincidentally more specific styles.

Expected behavior:

A few other components have props interfaces that allow a styles object, so we could provide our own styles object to be merged on top of the default styles. Can this one have that as well?

[JasonGore]

Yes, Panel is being converted to JS with issue #5367 and PR #5823 should soon be merged to support this.

[micahgodbolt]

This is now unblocked and should be capable via css in js styles, and the styles interface.

[msft-github-bot]

This issue has been automatically marked as stale because it has been marked as requiring author feedback but has not had any activity for 5 days. It will be closed if no further activity occurs within 3 days of this comment. Thank you for your contributions to Fabric React!

[JoshuaKGoldberg]

...nope, still a thing we'd want :)

[micahgodbolt]

This is pretty easy now with css-in-js style. Just add this to your panel.

styles={{
  header: {
    marginTop: 0
  }
}}