Как добавить типы в собственные реквизиты компонента рядом с темой темы?

Question

Я сделал следующее:

styled-components.ts - где я включаю тип темы в каждый метод и компонент библиотеки Styled-components

import * as styledComponents from 'styled-components';

import { Theme } from './app.theme';

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

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

app.tsx - С другой стороны, у меня есть файл приложения, в котором я использую один из этих методов и хочу добавить его собственные реквизиты в дополнение к реквизитам темы

mode, это переменная для выбора в теме ночного или дневного режима, которая изменяет цвета текста (это пример)

import * as React from 'react';
import { ThemeProvider, createGlobalStyle } from './styled-components';
import styled from './styled-components';

import { theme } from './app.theme';
import { fontFaces } from './app.fonts';

type AppProps = {};

type GlobalStyleProps = {
  isDarkMode: boolean;
};

const GlobalStyle = createGlobalStyle<GlobalStyleProps>`
  ${fontFaces}
  body{
    font-family: ${({ theme }): string => theme.fontFamily};
    color: ${({ theme, mode }) => mode === 'dark' ? 'black' : theme.fontColor };
  }
`;

export const App: React.FunctionComponent<AppProps> = () => {
  const [isDarkMode, setIsDarkMode] = React.useState(false);

  return (
    <>
      <ThemeProvider theme={theme}>
        <>
          <GlobalStyle mode={isDarkMode} />
          <>{`Hello World!`}</>
        </>
      </ThemeProvider>
    </>
  );
};

Но я получаю следующую ошибку в компоненте GlobalStyle в Lint:

Type '{mode: boolean;} 'нельзя назначить для типа' IntrinsicAttributes & IntrinsicClassAttributes, any, any >> & Readonly <...> & Readonly <...> '.Свойство 'mode' не существует для типа 'IntrinsicAttributes & IntrinsicClassAttributes, any, any >> & Readonly <...> & Readonly <...>'. Ts (2322)

Как можноЯ исправляю это, так что я могу набрать оба реквизита без этой ошибки?

Заранее спасибо.

Answer 1

GlobalStyleProps не имеет mode в качестве реквизита.

Если вы хотите использовать mode, переименуйте проп.

type GlobalStyleProps = {
  mode: boolean, // rename from isDarkMode to mode
};