web-dev-qa-db-fra.com

En utilisant des composants stylisés avec TypeScript, prop n'existe pas?

Voici ma composante stylisée.

import * as React from 'react';
import styled from 'styled-components';
import { ComponentChildren } from 'app-types';

interface Props {
    children: ComponentChildren;
    emphasized: boolean;
}

const HeadingStyled = styled.h2`
    ${props => props.emphasized && css`
        display: inline;
        padding-top: 10px;
        padding-right: 30px;
  `}
`;

const Heading = (props: Props) => (
    <HeadingStyled>
        {props.children}
    </HeadingStyled>
);

export default Heading;

Je reçois des avertissements:

  • Property 'emphasized' does not exist on type 'ThemedStyledProps<DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, any>'.
  • Cannot find name 'css'. Did you mean 'CSS'?

Comment puis-je faire en sorte que cela fonctionne?

reactjstypescriptstyled-components
10
user1283776
  • Le composant stylisé devra spécifier l'hélice à passer au composant comme styled("h2")<IProps>. Vous pouvez en savoir plus sur le modèle dans documentation
  • css n'est pas requis ici, il est ajouté comme aide lorsque vous devez réellement renvoyer CSS d'une fonction. Découvrez rendu conditionnel .

Compte tenu de ces éléments, le composant devient:

const HeadingStyled = styled("h2")<{emphasized: boolean}>`
  ${props => props.emphasized && `
    display: inline;
    padding-top: 10px;
    padding-right: 30px;
  `}
`;

n cas d'utilisation pour css

13
Boy With Silver Wings

La réponse précédente a fonctionné pour moi, mais juste pour ajouter quelques informations qui ont également été utiles dans mon cas:

StyledComponents utilise une interface "ThemedStyledFunction" qui permet à l'utilisateur de définir des types d'accessoires supplémentaires.

Cela signifie que vous pouvez créer une interface comme:

interface HeadingStyled {
   emphasized: boolean;
}

Et utilisez-le sur le composant:

const HeadingStyled = styled("h2")<HeadingStyled>`
  ${props => props.emphasized && `
    display: inline;
    padding-top: 10px;
    padding-right: 30px;
  `}
`;

(Ce qui est une façon plus propre de mettre en œuvre ce que @BoyWithSilverWings a suggéré, au cas où vous auriez plusieurs accessoires)

Consultez cette discussion pour des informations plus complètes:

https://github.com/styled-components/styled-components/issues/1428#issuecomment-358621605

0
Bruno Monteiro