stylowane komponenty mocno wpisują właściwość [theme] - reactjs, maszynopis, stylizowane komponenty

ja używam stylizowane komponenty TypeScript i ThemeProvider dla moich komponentów i miałem kilka pytań:

1. Przede wszystkim moje komponenty są tworzone przy użyciu map, więc użyłem przypisać key do każdego, teraz położyłem ThemeProvider być głównym komponentem nadrzędnym, a więc muszę ustawić key Na tym. Zastanawiałem się, czy to boli, żeby to zrobić? A może powinienem znaleźć sposób na stworzenie singla? ThemeProvider?

2. Ponieważ używam TypeScript, byłoby mi bardzo miło, gdybym mógł jakoś to zrobić props.theme własność powinna być silnie wpisana. Właśnie teraz, kiedy się unoszą props.themeWidzę, że ten typ jest any. Byłoby bardzo miło, gdybym mógł jakoś zdefiniować typ dla theme właściwość, nie zmieniając przewidywanego typu dla props

Problem, który mam teraz, polega na tym, że definiuję zwyczaj interface dla props Używam w styled składnika, tracę domyślne właściwości wywnioskowane przez komponent. Na przykład, jeśli chcę mieć coś takiego:

interface ComponentProps {
status: string;
}

Następnie tworzę taki komponent:

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

Następnie TypeScript narzeka na to theme nie istnieje ComponentProps, ale jeśli nie zdefiniuję typu dla props, kiedy chcę utworzyć mój komponent niestandardowy:

<MyComp status="hello" />

Teraz TypeScript narzeka na tę własność status nie dotyczy MyComp

Byłbym wdzięczny za każdą pomoc

Odpowiedzi:

Możesz utworzyć kontener i przekazać dowolną nieruchomość. Lubię to:

w styledWithProps.ts plik:

import { ThemedStyledFunction } from "styled-components";

export const styledWithProps = <U>() =>
<P, T, O>(
fn: ThemedStyledFunction<P, T, O>
): ThemedStyledFunction<P & U, T, O & U> => fn;

podczas korzystania z niego:

import styled, { css } from "styled-components";
import { styledWithProps } from "./styledWithProps.ts";

const MyComp = styledWithProps<any>()(styled.div) `
${props => props.theme==="dark" && css`
background-color: black;
`}
`;

const app = props => <MyComp theme="dark">{props.children}</MyComp>

Aby uzyskać więcej informacji, zobacz ten wątek: https://github.com/styled-components/styled-components/issues/630