Defaulting to "primary" variant overwrites multiple variants

[cmaycumber]

Example

const theme = {
 button: {
  primary: {
   bg: 'green'
  },
  secondary: {
   bg: 'blue'
  }
 }
};

...

/* This style is not applied because primary being the default variant takes precedence because singular variants take 
precedence over multi variants */
<Button variants=['secondary'] />

Dripsy Code

In css/index.tsx

...
export function mapPropsToStyledComponent<P, T>(
  props: StyledProps<P>,
  options: ThemedOptions<T>
) {
  const {
    themeKey,
    defaultStyle,
    /* This needs to be removed or handled differently */
    defaultVariant = 'primary',
    defaultVariants = [],
  } = options
...

[nandorojo]

That's interesting. What if we changed variants to primary by default, would that create the right behavior?

I think my hover support PR uses variants array to take precedence, but it isn't merged yet because of some unsolved bugs. I'll retry it after #74 is merged.

[cmaycumber]

I think a combination of adding the primary variant as default in the variants array and making the variants array take precedence would solve this.