How to change layout of Office's Fabric elemen

Question

I'm fairly new to React and Microsoft's Fabric. I've been trying to figure out if I can change the layout of elements inside a <GroupHeader> Looking at the source it's not totally clear to me if the elements follow some sort of layout style, or if they just appear in the order of declaration inside the render function. I was hoping to rearrange some elements rather than create a completely custom <GroupHeader>. I've tried adjusting some CSS properties and passing those in as a className, but it hasn't worked.

Is there a way to do that? Or what would be the best approach to this task?

Answer 1

I've put this codepen real quick to show how a GroupHeader can be styled by changing the order of the collapse button. There are probably a few other methods including a regular css style or even a custom onRenderHeader but it looks like you don't wanna create a custom renderer. Let me know if that helps!