How to obtain consistent styling when making custom picker?

[ewylie25]

Hi

I notice that all the pickers (people picker, tag picker, etc.) all apply a set of styles in BasePicker.styles.ts which makes the resulting picker consistent with other inputs like the TextField (in particular it makes the heights and borders match consistently).

Are these styles exported anywhere for use in generating custom pickers from the BasePicker class? Or is there a pre-styled version of the BasePicker exported anywhere?

I was having UX inconsistencies when building a custom picker that's used in a form with other fluent inputs which I fixed by copying the styles from BasePicker.styles.ts to our codebase. However, it seems silly to copy the code since it's not a trivial amount of CSS.

[micahgodbolt]

They are not exported, but you could create your own picker by using BasePicker and passing in a customized picker item.

Otherwise copying the styles would be required.