Override variant default style without style

[Dan McAtee]

I created a Surface Component which takes a custom variant

const variant = createVariant({ themeKey: 'surfaceVariants' });

type Props = VariantProps<Theme, 'surfaceVariants'> &
  React.ComponentProps<typeof Box>;

const Surface = createRestyleComponent<Props, Theme>([variant], Box);

surfaceVariants: {
    defaults: {
      backgroundColor: 'white',
      shadowColor: 'black',
      shadowOpacity: 0.24,
      shadowOffset: { width: 0, height: 0.5 },
      shadowRadius: 0.75,
      elevation: 1,
    },
    elevatedS: {
      shadowOffset: { height: 0.75 },
      shadowRadius: 1.5,
      elevation: 2,
    },
}

When I want to override the backgroundColor like this

<Surface variant="elevatedL" backgroundColor="red">

the background color doesn't change.
Is there a way to get past this or am I getting something wrong?

[Binh Nguyen]

@dnmct I've encountered the same exact thing. Unfortunately, I had to use a more functional approach and avoid using createVariant all together.

export const Card = ({ children, variant = 'outline', ...props }) => {
  const cardStyles = getCardVariant(variant);

  return (
    <Box backgroundColor='white' {...cardStyles} {...props}>
      {children}
    </Box>
  )
};

const getCardVariant = (variant) => {
  switch (variant) {
    case 'outline':
      return { /* styles */ }
    case 'elevated':
      return { /* styles */ }
    case 'default':
      return { /* styles */ }
}

Then overriding worked with no issues at all:

<Card backgroundColor='blue' />

[Raphaël Moreau]

Hello,

When you create a restyle component, you should add what "inlines properties" it can handle ;)

import {
  ...
  backgroundColor,
 ...
} from "@shopify/restyle";

const variant = createVariant({ themeKey: 'surfaceVariants' });

type Props = VariantProps<Theme, 'surfaceVariants'> &
  React.ComponentProps<typeof Box>;

const Surface = createRestyleComponent<Props, Theme>([backgroundColor, variant], Box);

It should works ;) (tested on version 1.4.0)

But I don't know why it's not working without that, because Box already include this possibility.
Maybe it's to ensure that we really want to do that :D