reactjs - 使用带有 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'?

我怎样才能让它工作？

标签： reactjstypescriptstyled-components

Answer 1

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

考虑到这些，组件变为：

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

一个用例css