Как набрать стилизованный компонент, не теряя при этом опору с Typescript?

Question

Я новичок в стилизованных компонентах, и я хотел бы иметь возможность правильно набирать мои стилизованные компоненты, чтобы при прохождении пропов "против кода" я мог автоматически определять все те реквизиты, которые у меня есть, а не только один в теме или те, которые я мог бы поставить с интерфейсом.

Был бы какой-нибудь способ без использования HOC для этого, как я видел в каком-то другом ответе ? Можно ли получить общий реквизит для использования во всех без определения каждого свойства стиля, как в примере?

app.theme.ts

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

export type Theme = typeof theme;

навигация-bar.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};
`;

Заранее спасибо, Лучший

Answer 1

Это можно решить, как сказал @ Huy-Nguyen, но на практике вы теряете свойства в Styled Components или вам приходится определять одно и то же много раз.

Так что лучший вариант - это Styled-Componentsвеб-сайт говорит (чтобы определить интерфейс темы):

theme.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;

И затем, вы используете это:

import styled from 'app/styled-components';

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

Просто передайте ссылку: https://www.styled -components.com / docs / api # define-a-theme-interface

Большое спасибо за все.

Answer 2

По какой-то причине (возможно, из-за способа написания определения машинописи styled-components), набор для Theme работает, если вы удалите один из уровней вложенности. Этот фрагмент кода проверяется без ошибок для меня (v4), то есть машинопись знает, что primaryColor является 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};
`;