使用带有 Typescript 的样式组件，prop 不存在？

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

我怎样才能让它工作？

原文由 user1283776 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

• 样式化的组件必须指定要传递给组件的道具，例如 styled("h2")<IProps> 。您可以从 文档 中阅读有关该模式的更多信息
• css 此处不需要，当您需要从函数中实际返回 CSS 时，将其作为帮助程序添加。查看 条件渲染。

考虑到这些，组件变为：

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

css 的用例

原文由 Agney 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

以前的答案对我有用，但只是为了添加一些对我的情况也有帮助的信息：

StyledComponents 使用“ThemedStyledFunction”接口，允许用户定义额外的道具类型。

这意味着您可以创建如下界面：

 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

原文由 Bruno Monteiro 发布，翻译遵循 CC BY-SA 4.0 许可协议