Predefined styles for components conflict with custom styling

[gfcf14]

I have noticed that, when I try to create components using Flex for example, I get the following on the browser:

which in turn introduces some css:

which conflict with my components if I am using custom style values:

To fix this thus far, I've had to use the !important rule to ensure my style gets applied. But is there a way to tell this packages components not to provide these values when not needed? I tried using a style prop as style={{ margin: 'unset' }} but that removes my margin-top

[wiscat]

As a possible solution you can copy-paste Flex and Box components and remove the "margin: 0" line:

https://github.com/rebassjs/rebass/blob/master/packages/reflexbox/src/index.js