es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Utilizando `.attrs` de Styled-Components con TypeScript (Las Propiedades no se fusionan)

29 Jul, 2023 Programación

Cuando hago esto:

const Button = styled.button.attrs((props:ButtonProps) => ({
    primary: props.buttonType === 'primary',
    secondary: props.buttonType === 'secondary',
    critical: props.buttonType === 'critical',
    small: props.buttonSize === 'small',
}))

Obtengo el siguiente error con TS:
Imagen

Mis tipos son los siguientes:

type ButtonProps = {
    buttonType?: 'primary' | 'secondary' | 'critical';
    children?: React.ReactChild | React.ReactChild[];
    buttonSize?: 'small' | 'medium';
};

Sin embargo, el problema se soluciona cuando paso las props originales con los atributos editados de la siguiente manera:

const Button = styled.button.attrs((props:ButtonProps) => ({
    primary: props.buttonType === 'primary',
    secondary: props.buttonType === 'secondary',
    critical: props.buttonType === 'critical',
    small: props.buttonSize === 'small',
  ...props
}))

He visto en otros lugares en línea que se supone que debo escribir “props” en “attrs” de la misma manera que lo haría con styled-components normales, como aquí:

const Button = styled.button.attrs<buttonprops>((props) => ({
    primary: props.buttonType === 'primary',
    secondary: props.buttonType === 'secondary',
    critical: props.buttonType === 'critical',
    small: props.buttonSize === 'small',
}))

Pero esto solo me da el mismo error que en la imagen :/

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    El problema que estás enfrentando se debe a que TypeScript no puede inferir completamente el tipo del objeto props dentro de la función attrs. Como resultado, TypeScript no puede determinar si las props que estás intentando definir en el componente Button son válidas.

    Para solucionar este problema, puedes especificar explícitamente el tipo del objeto props dentro de la función attrs de la siguiente manera:

    const Button = styled.button.attrs<buttonprops>((props) => ({
  primary: props.buttonType === 'primary',
  secondary: props.buttonType === 'secondary',
  critical: props.buttonType === 'critical',
  small: props.buttonSize === 'small'
}))`
  /* Tus estilos CSS aquí */
`;

    Esto garantiza que TypeScript tenga el tipo correcto para el objeto props y pueda validar correctamente las props que estás definiendo en el componente Button.

    Además, para asegurarte de que las props adicionales pasadas al componente Button se validen correctamente, debes expandir el objeto props al final de la función attrs, de la siguiente manera:

    const Button = styled.button.attrs<buttonprops>((props) => ({
  primary: props.buttonType === 'primary',
  secondary: props.buttonType === 'secondary',
  critical: props.buttonType === 'critical',
  small: props.buttonSize === 'small',
  ...props
}))`
  /* Tus estilos CSS aquí */
`;

    Esto garantiza que cualquier prop adicional pasada al componente Button se valide correctamente por TypeScript.

Comments are closed.