reactjs - Hur man typer en stylad komponent utan att förlora någon prop med Typescript?

Jag är ny på styled components och jag skulle vilja kunna skriva mina styled components korrekt så att när jag skickar props i "vs code" kan jag automatiskt upptäcka alla de props jag har, inte bara de som finns i temat eller de jag kan lägga till med ett interface.

Finns det något sätt utan att använda en HOC för det eftersom jag har sett i några andra svar? Är det möjligt att få en generell prop att använda i alla utan att behöva definiera den i varje stil-egenskap som i exemplet?

app.tema.ts

export const theme = {
  palette: {
    primaryColor: '#FF5018',
    secondaryColor: '#252729',
    tertiaryColor: '#1A1C1E',
    textColor: 'white',
  },
};

export type Theme = typeof theme;

navigationsfält.styled.component.ts

export const NavigationBarStyled = styled.div`
  grid-area: navigation-bar-item;
  padding-left: 2rem;
  display: flex;
  align-items: center;
  color: ${({ theme }) => theme.palette.primaryColor};
  background-color: ${({ theme }) => theme.palette.primaryColor};
`;

Tack på förhand, Vänliga hälsningar

Svar #1

Det skulle kunna lösas som @Huy-Nguyen sa men i praktiken förlorar du egenskaper på Styled Components eller så måste du definiera samma många gånger.

Så det bästa alternativet är detta som Styled-Components webbplats säger (för att definiera ett temagränssnitt):

tema.ts

export default interface ThemeInterface {
  primaryColor: string;
  primaryColorInverted: string;
}

styled-components.ts

import * as styledComponents from "styled-components";

import ThemeInterface from "./theme";

const {
  default: styled,
  css,
  createGlobalStyle,
  keyframes,
  ThemeProvider
} = styledComponents as styledComponents.ThemedStyledComponentsModule<ThemeInterface>;

export { css, createGlobalStyle, keyframes, ThemeProvider };
export default styled;

Och sedan använder du det:

import styled from 'app/styled-components';

// theme is now fully typed
const Title = styled.h1`
  color: ${props => props.theme.primaryColor};
`;

Bara skicka länken: https://www.styled-components.com/docs/api#define-a-theme-interface

Tack så mycket för allt.

Svar #2

Av någon anledning (möjligen på grund av hur styled-componentss TypeScript-definition är skriven), fungerar typen för Theme om du tar bort en nivå av nästling. Detta kodexempel typkontrolleras utan fel för mig (v4), dvs TypeScript vet att primaryColor är en string:

const theme = {
  primaryColor: '#FF5018',
  secondaryColor: '#252729',
  tertiaryColor: '#1A1C1E',
  textColor: 'white',
};

type Theme = typeof theme;

type Props = Theme & {
  // ... other keys
}

const NavigationBarStyled = styled.div<Props>`
  grid-area: navigation-bar-item;
  padding-left: 2rem;
  display: flex;
  align-items: center;
  color: ${props => props.primaryColor};
  background-color: ${props => props.primaryColor};
`;

Relaterade artiklar