Closed brduck closed 2 years ago
what does your theme look like?
my guess is it’s pulling values from your theme.space
, which would happen if you use a plain array.
I recommend doing this:
const theme = makeTheme({
space: {
$0: 0,
$1: 4,
$2: 8,
$3: 16,
$4: 32,
$5: 64,
$6: 128,
$7: 256,
$8: 512
}
})
And then:
<View sx={{ pr: '$3' }} />
Oof, I see the issue:
Looks like we set the default space
for you. So you can fix it with the comment above. I think this code is pulled over from theme-ui
, and since everyone always overrides it, it's never been an issue until now.
It would be a breaking change to remove this, but I can do it in the next release. For now, if you explicitly set space
in your theme, it will solve this.
@nandorojo thanks! passing the space
property to makeTheme
and using the theme's value in our components worked like a charm
awesome!
In our project, we're using
dripsy
within astyles.ts
file theming everything withstyled
similar tostyled-components
. ex:But when I set margin or padding the final code get it's value powered (happens on Next and Expo), examples:
Example 1
Padding with 8px using
styled()
Code (8px):
Browser (512px which is 2⁹):
Example 2
Padding with 7px using
dripsy
<View/>
withsx
:Code (7px):
Browser (256px wich is 2⁸)
Example 3 - Works as Expected
Padding with 9px using
styled()
Code(9px):
Browser (9px):