Aphrodite CSS overwriting margin and padding

Question

I'm having an issue with aphrodite, where if I have my base-component set to the global selector for example margin: 0 or any of the sides marginLeft, marginRight, marginTop, marginBottom set. Then when I try to overwrite one or the other, it doesn't take.

For instance a divset with margin: 0 then I add another style marginBottom: 10 doesn't work. Same is true in reverse. If marginBottom: 10 is set and I set margin: 0 it doesn't work.

https://github.com/Khan/aphrodite

any code for us to easily watch without need to download that GitHub package? — Jorge Fuentes González, Mar 07 '17 at 18:30
Are you familiar with `!important` and the importance of your css order? — Harry, Mar 07 '17 at 18:31
Check if Aphrodite css is changing your class names and then define the class names again in your own css file with `!important`. — Harry, Mar 07 '17 at 18:43
They totally are, I just don't know the best way of overwriting styles with Aphrodite. — ThomasReggi, Mar 07 '17 at 19:13

score 0 · Answer 1 · answered Apr 19 '17 at 04:21

From the docs: Object Key Ordering

const styles = StyleSheet.create({
ordered: new Map([
    ["margin", 0],
    ["marginLeft", 15],
  ]),
});

Note that Maps are not fully supported in all browsers. It can be polyfilled by using a package like es6-shim.

Aphrodite CSS overwriting margin and padding

1 Answers1