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

【问题标题】：Using styled components with Typescript, prop does not exist?使用带有 Typescript 的样式组件，prop 不存在？
【发布时间】：2019-02-23 13:48:14
【问题描述】：

这是我的样式化组件。

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

我怎样才能让它工作？

【问题讨论】：

标签： reactjs typescript styled-components

【解决方案1】：

样式化的组件必须指定要传递给组件的道具，例如styled("h2")<IProps>。您可以从documentation 阅读有关该模式的更多信息
css 在这里不是必需的，当您需要从函数中实际返回 CSS 时，它会作为助手添加。查看conditional rendering。

考虑到这些，组件变为：

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

A use-case for css

【讨论】：

文档与您的示例不同，并且 css 用例 不再起作用。请问可以调查一下吗？我迷路了。
在我写完答案后，类型发生了变化，最近的变化更新了答案
我想补充一点我缺少的东西：你还需要将emphasized 属性传递给HeadingStyled，就像这样：<HeadingStyled emphasized={props.emphasized}> {props.children} </HeadingStyled>。对某些人来说可能很明显，但想指出这一点

【解决方案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

【讨论】：

【解决方案3】：

这个解决方案也适用于情感，可能是因为他们都使用手写笔作为预处理器？

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};
`;

【讨论】：

【解决方案4】：

在不同的工作表中使用样式组件时，我遇到了同样的错误。

我必须在 index.tsx 中这样做：

 export interface RadioBoxProps {
    isActive: boolean;
}

然后，在样式表中：

 import { RadioBoxProps } from "./index";

export const RadioBox = styled.button<RadioBoxProps>`

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

`

在我正在观看的教程中，该人在没有导出界面并在样式表中导入的情况下通过。对他来说，它工作得很好。然而，对我来说，当我做了上面显示的事情时，我并没有工作。

【讨论】：