shorthand styles do not override longhand

[jjenzz]

in both of these examples the padding will be 30:

const Button = styled(Pressable)({
  backgroundColor: 'red',
  px: 30,
  py: 30,
  p: 10,
});

const Button = styled(Pressable)({
  backgroundColor: 'red',
  px: 30,
  py: 30,
});

return (
  <Button sx={{ p: 10 }}>
    <Text>Button</Text>
  </Button>
);

i had expected styles that are assigned last would override. is this a misplaced expectation or a bug?

[nandorojo]

this is how react native styling works. specificity takes precedent over key placement.

[nandorojo]

paddingTop will always override padding, regardless of the order in which it’s written

[nandorojo]

going to close this one since the behavior is as expected

see: https://github.com/necolas/react-native-web/issues/40#issuecomment-151685237

[jjenzz]

ahhh interesting, okay, my bad 🙈 thanks for taking the time to look regardless