Fix specificity problem of margin for Spacings -> Text components

The margin: 0 set on the typography components is really annoying when using them with e.g. <Spacings.{Inline,Stack}> components, because the margin from the spacing components doesn’t get applied (lower specificity). To work around that, you would wrap the <Text> components in a <div>.

Should we maybe simply force the spacing components to apply their margin by using !important? It feels like a little hack but maybe it’s more of a trade-off.

Thoughts?

[emmenko]

The purpose of a design system is for the components implementation to be as strict as possible in regards to the design rules, which means allowing components to be styled freely will defeat the purpose of a design system.

[jonnybel]

I heavily support the idea of having our uikit components support a className prop, because it would allow us not only to overcome some certain specificity problems such as this one, but also generally improve the flexibility of all components, making their usage closer to using the native HTML elements.

It’s a simple solution and we would avoid all the generally regarded as bad practices of using !important, altering markup and the current excess of div wrappers.