Replies: 2 comments
-
@dnmct I've encountered the same exact thing. Unfortunately, I had to use a more functional approach and avoid using 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' /> |
Beta Was this translation helpful? Give feedback.
0 replies
-
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. |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
I created a Surface Component which takes a custom variant
When I want to override the backgroundColor like this
the background color doesn't change.
Is there a way to get past this or am I getting something wrong?
Beta Was this translation helpful? Give feedback.
All reactions