defaultVariant styles inherited in other variants

if i add some buttons variants to my theme and declare one of these as the defaultVariant for my Button component, styles from the defaultVariant must be manually reset or overridden in my other variant options.

for example, take the following excerpt from my theme object:

  buttons: {
    medium: {
      borderRadius: "$xlarge",
      py: 14,
      px: "$8",
    },
    circle: {
      borderRadius: "$rounded",
      alignItems: "center",
      justifyContent: "center",
      width: 40,
      height: 40,
    },
  },

with the following component definition:

const Button = styled(Pressable, {
  themeKey: "buttons",
  defaultVariant: "medium",
})({
  alignSelf: "center",
});

when rendering <Button variant={'circle'} /> it will have the py and px padding from the medium variant. i have to add px: 0, py: 0 to my circle variant to prevent this.

i didn’t expect it to inherit this way. it seems like it could be a bug because if i do not set a defaultVariant then no inheriting occurs. let me know if my expectations are misplaced here tho.

[jjenzz]

I have to admit, I’ve found myself using the variant prop somewhat infrequently over time. I prefer to see the styles closer to the components.

i was also unsure about declaring styles in theme at first as I am used to stitches where variants are declared as part of the component, however, your approach has opened my eyes somewhat in that it could allow designers to more easily have control over visual styles. the components themselves could handle functional styles only.

i’ve been trialing going all in on this approach and enjoying it thus far!

What if we added an fallbackVariant option, which gets overridden by variant used on the component itself? It’s a little confusing to add more to the API, but I think this more clearly states that variant will “fallback” if nothing is provided.

this would be super helpful and would suit my use-case perfectly 🙏

[nandorojo]

thanks for the issue! i see, you’re expecting variant || defaultVariant. i’ll look into this for you and see what’s up.