Predefined styles for components conflict with custom styling

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