How to extend a styled component created using a recipe ?

[iamsuneeth]

I have a card component taken from shadow panda

import {
  card,
} from '@styled-system/recipes';

export const Card = styled('div', card);

I want to extend Card component and create a new component BorderlessCard. I tried the following

export const BorderlessCard = styled(Card, {
  base: {
    border: 'none'
  },
});

but met with the following error, which seems appropriate.

 TypeError: Cannot merge cva with recipe. Please use either cva or recipe.

Is there anyway in panda to achieve this ?

The best I could come up with is below, which I don't think is the right way.

export const BorderlessCard = styled('div', card.raw(), {
  defaultProps: {
    className: css({
      border: 'none',
    }),
  },
});

[anubra266]

@iamsuneeth https://play.panda-css.com/RV0IkiDngT

[iamsuneeth]

@anubra266 So there is no other way than composing Card inside a BorderlessCard component ?

[anubra266]

@iamsuneeth I'm not sure I understand your question. You want to extend an existing styled component which you've created from a recipe in runtime right?
Or are you trying to change the recipe before it goes into your config. Please be specific with what you need.

[iamsuneeth]

Yes. But I was looking for a way to do it using styled, if possible, instead of creating a new component explicitely just for modifying styles.

[anubra266]

I see @iamsuneeth
How about something like this?
https://play.panda-css.com/UDaOSnS_ag

[iamsuneeth]

Sure, that will work. Thanks 👍. So in effect

• components created using config recipes cannot be extended using cva recipes at runtime.
• you can achieve the same behaviour using either
• • Composition: Create a React component and compose the styled component inside and apply overrides using props.
• • Create a second config recipe using the first recipe and the specific overrides you want.

This sounds correct ?

[anubra266]

Yes @iamsuneeth But About the 2nd point, if you want that behaviour in card, you don't need to create borderlesscard, just call it card, and it will override the card coming from shadow panda