将样式组件与 Typescript 一起使用，prop 不存在？

IT技术 reactjs typescript styled-components
2021-03-29 12:54:20

这是我的样式组件。 

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

我怎样才能让它工作？

4个回答
  • 样式化组件必须指定要传递给组件的 prop，如styled("h2")<IProps>. 您可以从文档中阅读有关该模式的更多信息
  • css在这里不是必需的，当您需要从函数实际返回 CSS 时，它会被添加为帮助程序。查看条件渲染。

考虑到这些，组件变成：

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

一个用例 css

该文档与您的示例不同，并且css的用例也不再起作用。你能调查一下吗？我搞不清楚了。
2021-05-26 12:54:20
在我写下答案后，打字发生了变化，用最近的变化更新了答案
2021-06-06 12:54:20
我只想添加我所缺少的另一件事：您还需要将emphasized道具传递给HeadingStyled，如下所示：<HeadingStyled emphasized={props.emphasized}> {props.children} </HeadingStyled>。对某些人来说可能很明显，但想指出
2021-06-18 12:54:20

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

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

这意味着您可以创建一个界面，如：

interface IHeadingStyled {
   emphasized: boolean;
}

并在组件上使用它：

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

（这是实现@BoyWithSilverWings 建议的更简洁的方法，以防您有多个props）

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

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

这个解决方案也适用于情感，也许是因为他们都使用 stylis 作为预处理器？

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

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

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

 export interface RadioBoxProps {
    isActive: boolean;
}

然后，在样式表中：

 import { RadioBoxProps } from "./index";

export const RadioBox = styled.button<RadioBoxProps>`

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

`

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

其它你可能感兴趣的问题
上一篇React Native 0.57.1​​ Android 重复资源 下一篇是否可以使用公共文件夹中的 create-react-app 提供静态文件？