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 div set 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

Answer 1

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 .