Question

我正在使用styled-components TypeScript和ThemeProvider作为我的组件，我有几个问题：

首先，我的组件是使用map创建的，因此我曾经为每个组件分配key，现在我已将ThemeProvider作为最高父级组件，因此我需要设置key。我只是想知道这样做有什么坏处吗？或者我应该找到一种方法来创建单个ThemeProvider？
由于我使用TypeScript，如果我能以某种方式使我的props.theme属性强类型，那将是非常好的。现在当我将鼠标悬停在props.theme上时，我看到类型为any。如果我能以某种方式定义theme属性的类型而不更改props的推断类型

我现在遇到的问题是，当我在interface组件中使用props我定义自定义styled时，我会忽略由组件。例如，如果我想要这样的东西：

interface ComponentProps {
  status: string;
}

然后，我创建一个这样的组件：

const MyComp = styled.div`
  background-color: ${(props: ComponentProps) => props.theme...};
`

然后，TypeScript会抱怨theme上ComponentProps不存在，但如果我没有定义props的类型，那么我想要创建我的自定义组件：

<MyComp status="hello" />

现在，TypeScript抱怨财产status不适用于MyComp

我将不胜感激任何帮助

Answer 1

您可以创建容器，并传递您喜欢的任何属性。像这样：

styledWithProps.ts 文件中的

：

var d = new Date();
var year = d.getFullYear();
var month = d.getMonth();
var day = d.getDate();
var c = new Date(year + 2, month, day + 30)

var weekday = new Array(7);
weekday[0] = "Sunday";
weekday[1] = "Monday";
weekday[2] = "Tuesday";
weekday[3] = "Wednesday";
weekday[4] = "Thursday";
weekday[5] = "Friday";
weekday[6] = "Saturday";

var n = weekday[c.getDay()];

document.write(n)

使用时：

import { ThemedStyledFunction } from 'styled-components';

export const styledWithProps = <U>() =>
    <P, T, O>(
        fn: ThemedStyledFunction<P, T, O>
    ): ThemedStyledFunction<P & U, T, O & U> => fn;

有关详细信息，请查看此主题：https://github.com/styled-components/styled-components/issues/630

styled-components强类型[theme]属性

1 个答案: