Actualmente recibo este error y no estoy muy seguro de cómo evitarlo, ya que todo lo que he intentado realmente no funciona.

Pensé que esto lo arreglaría, pero no fue así:

 ${({ maxWidth }) => maxWidth && `max-width: ${maxWidth};`}

El error:

 Warning: React does not recognize the `maxWidth` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `maxwidth` instead. If you accidentally passed it from a parent component, remove it from the DOM element.

Mi primer componente se ve así:

 export const DialogWrapper = styled(DialogContent)<CardWrapperProps>` ${({ outline }) => outline && `border: 1px solid ${COLORS.gray300};`} border-radius: ${SCALE.size4}; width: ${({ width }) => width}; ${({ maxWidth }) => maxWidth && `max-width: ${maxWidth};`} ${({ height }) => (height ? `max-height: ${height};` : '')} background: ${COLORS.white}; `

Y mi segundo así:

 export const Card = forwardRef<HTMLDivElement, CardProps>( ({ outline, elevation, width = 'inherit', maxWidth='650px', isModal, ...props }, ref) => { const CardWrapper = isModal ? DialogWrapper : Wrapper return ( <CardWrapper data-testid={`card`} data-title={props.title} aria-label={'card'} ref={ref} {...{ outline, elevation, width, maxWidth, ...props }} > <CardContent {...{ elevation, isModal, ...props }} /> </CardWrapper> ) } )