search

rebassjs / rebass

:atom_symbol: React primitive UI components built with styled-system.
https://rebassjs.org
MIT License
7.94k stars 658 forks source link

Predefined styles for components conflict with custom styling #1130

Open gfcf14 opened 3 years ago

gfcf14 commented 3 years ago

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

image

which in turn introduces some css:

image

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

image

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 commented 2 years ago

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