Typescript와 함께 스타일링된 컴포넌트를 사용하면 프로펠러가 존재하지 않습니까?

Typescript와 함께 스타일링된 컴포넌트를 사용하면 프로펠러가 존재하지 않습니까?

여기 제 스타일링 컴포넌트입니다.

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;

다음과 같은 경고가 표시됩니다.

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

어떻게 하면 작동시킬 수 있을까요?

• 스타일링된 컴포넌트는 다음과 같이 컴포넌트에 전달할 프로펠러를 지정해야 합니다.styled("h2")<IProps>패턴에 대한 자세한 내용은 설명서를 참조하십시오.
• css는 여기서 필수가 아닙니다.기능에서 실제로 CSS를 반환해야 할 때 도우미로 추가됩니다.조건부 렌더링을 확인합니다.

이러한 점을 고려하여 컴포넌트는 다음과 같습니다.

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

의 사용 예css

이전 답변은 도움이 되었습니다만, 제 경우에도 도움이 되는 정보를 추가해 주세요.

Styled Components는 사용자가 추가 Prop Type을 정의할 수 있는 "Thema Styled Function" 인터페이스를 사용합니다.

즉, 다음과 같은 인터페이스를 작성할 수 있습니다.

interface IHeadingStyled {
   emphasized: boolean;
}

컴포넌트에 사용합니다.

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

(여러 개의 소품을 가지고 있는 경우, @BoyWithSilverWings가 제안하는 것을 보다 깔끔하게 구현할 수 있는 방법입니다.

---

상세한 것에 대하여는, 다음의 토픽을 참조해 주세요.

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

이 솔루션은 감정과도 함께 작동하는데, 둘 다 스타일리스를 프리프로세서로 사용하기 때문일까요?

interface ButtonProps {
  width: string;
}

const Button = styled("button")<ButtonProps>((props) => {
  return `width: ${props.width};`;
});

아니면 다른 맛 같은 것

interface ButtonProps {
  width: string;
}

const Button = styled("button")<ButtonProps>`
  width: ${props => props.width};
`;

또는

interface ButtonProps {
  width: string;
}

const Button = styled.button<ButtonProps>`
  width: ${props => props.width};
`;

다른 시트로 스타일링된 부품을 사용할 때도 같은 오류가 발생하였습니다.

index.tsx에서 이 작업을 수행해야 했습니다.

 export interface RadioBoxProps {
    isActive: boolean;
}

그런 다음 스타일링 시트에서 다음을 수행합니다.

 import { RadioBoxProps } from "./index";

export const RadioBox = styled.button<RadioBoxProps>`

background: ${(props) => props.isActive ? '#eee' : 'transparent'};

`

제가 보고 있던 튜토리얼에서는 인터페이스를 내보내지 않고 스타일링 시트로 Import하지 않고 통과합니다.그에게는 잘 먹혀들고 있었다.하지만, 저는 위에서 보여드린 대로 일을 하지 않고 그냥 일했습니다.

   /** In App.tsx **/

      <div className="App">
          <Button>Register</Button>
          <Button primary="primary">Register</Button>
     </div>


    /*In your functional component*/
    import styled from "styled-components";
    
    interface IButtonPropsType {
      primary: string;
    }
    
    export const Button = styled.button<IButtonPropsType>`
    background: ${(props) => (props.primary ? "palevioletred" : "white")}
    color: ${(props) => (props.primary ? "white" : "palevioletred")}
    font-size: 1.5em
    margin: 1em;
    padding: 0.25em 1em;
    border: 2px solid palevioletred;
    border-radius: 3px;
    `;

언급URL : https://stackoverflow.com/questions/52404958/using-styled-components-with-typescript-prop-does-not-exist