将样式组件与 Typescript 一起使用，prop 不存在? [英] Using styled components with Typescript, prop does not exist?

问题描述

这是我的样式组件.

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;

我收到以下警告:

• 属性强调"不存在于类型ThemedStyledProps, HTMLHeadingElement>, any>".
• 找不到名称css".您的意思是CSS"吗?

我怎样才能让它工作?

推荐答案

• 样式化组件必须指定要传递给组件的道具，例如 styled("h2").您可以从文档
中阅读有关该模式的更多信息
• css 在这里不是必需的，当您需要从函数实际返回 CSS 时，它会被添加为帮助程序.查看条件渲染.
• The styled component will have to specify the prop to pass to the component like styled("h2")<IProps>. You can read more about the pattern from documentation
• css is not required here, it is added as a helper when you need to actually return CSS from a function. Check out conditional rendering.

考虑到这些，组件变成:

Taking these into account, the component becomes:

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

css 的用例

这篇关于将样式组件与 Typescript 一起使用，prop 不存在?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！