如何使用 Office UI Fabric React 在 CommandBar 菜单中显示喙？

Question

Please have a look the following demo:

https://rry5wyov7o.codesandbox.io

You see a normal Office UI Fabric React CommandBar (in this special case it's some kind of menu bar).

Now have a look at the exactly same demo in the Codesandbox IDE:

https://codesandbox.io/s/rry5wyov7o

By accident (maybe because of the IFrame or whatever), in the Codesandbox IDE when the menus pop out you see little beaks at the top of the menus. Actually, I like those beaks and want to use them in some special cases.

So the question is: Is there a way to force/activate these beaks in an Ofice UI Fabric React CommandBar?

Answer 1

Here you go: https://codesandbox.io/s/kx7w36xzv

I used buttonAs prop to provide a custom button which has it's menuProps.isBeakVisible as true

(On a side note, the beaks were not visible because of the iframe but because the viewport was small and beaks are visible by default on smaller viewports.)