Group spacing using lobotomized owl selector

[kesne]

Most frameworks seem to implement spacing between adjacent elements using the lobotomized owl selector (ref: https://alistapart.com/article/axiomatic-css-and-lobotomized-owls/). Is there any way that the Group component in mantine could be re-implemented using that? The current implementation requiring the children accept a className prop can be cumbersome, and is not obvious what breaks when a component does not accept the prop.

[rtivital]

This selector will not work for Group component. Group support multiple rows, you can find styles here.
Using & > * selector will increase specificity and will be problematic to override. We could also wrap each child in a div element, but that will produce extra markup and disable some use cases. So the className approach has the least amount of trade-offs.

If you need to use a component that does not support className within Group – wrap it with a div:

<Group>
  <div><YourComponent /></div>
</Group>