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

样式化的组件将必须指定要传递给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

Answer 2

上一个答案对我有用，但只是添加一些对我的情况也有帮助的信息：

StyledComponents使用“ ThemedStyledFunction”界面，该界面允许用户定义其他道具类型。

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

<div id="card-element" class="form-control">

并在组件上使用它：

interface HeadingStyled {
   emphasized: boolean;
}

（如果您有多个道具，这是一种更干净的方法来实现@BoyWithSilverWings的建议）

查看此讨论以获取更多完整信息：

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

在Typescript中使用样式化的组件，prop不存在吗？

2 个答案: