diff --git a/components/product/ProductCard/ProductCard.module.css b/components/product/ProductCard/ProductCard.module.css index 49518143a..cad429c70 100644 --- a/components/product/ProductCard/ProductCard.module.css +++ b/components/product/ProductCard/ProductCard.module.css @@ -100,3 +100,7 @@ .slim { @apply bg-transparent relative overflow-hidden box-border; } + +.slim .tag { + @apply bg-secondary text-secondary inline-block p-3 font-bold text-xl break-words; +} diff --git a/components/product/ProductCard/ProductCard.tsx b/components/product/ProductCard/ProductCard.tsx index e3868798b..14d2e0030 100644 --- a/components/product/ProductCard/ProductCard.tsx +++ b/components/product/ProductCard/ProductCard.tsx @@ -35,9 +35,7 @@ const ProductCard: FC = ({ {variant === 'slim' && ( <>
- - {product.name} - + {product.name}
{product?.images && ( = ({ return (
- {() =>
{children}
} + {() => ( +
+ {Children.map(children, (child) => { + if (isValidElement(child)) { + return { + ...child, + props: { + ...child.props, + className: cn(child.props.className, `${variant}`), + }, + } + } + return child + })} +
+ )}
)