Используя стилизованные компоненты с Typescript, проп не существует?

Question

Вот мой стилизованный компонент.

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'?

Как я могу получить эторабота

Answer 1

Предыдущий ответ работал для меня, но только для того, чтобы добавить некоторую информацию, которая также была полезна в моем случае:

StyledComponents использует интерфейс "ThemedStyledFunction", который позволяет пользователю определять дополнительные типы проп.

Это означает, что вы можете создать интерфейс, подобный:

interface HeadingStyled {
   emphasized: boolean;
}

и использовать его для компонента:

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

(который является более чистым способомреализовать то, что предложил @BoyWithSilverWings, если у вас есть несколько реквизитов)

---

Проверьте это обсуждение для получения более полной информации:

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

Answer 2

• Стилизованный компонент должен указать реквизит для передачи в компонент, например styled("h2")<IProps>.Вы можете прочитать больше о шаблоне из документации
• css здесь не требуется, он добавляется в качестве помощника, когда вам действительно нужно вернуть CSS из функции.Проверьте условное отображение .

Принимая это во внимание, компонент становится:

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

Вариант использования для css