How to add types to the own props of the component next to those of the theme?

Question

I had done the following:

styled-components.ts - Where I include the Theme type in each method and component of Styled-components' library

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 - On the other side, I've the app file in which I use one of these methods and want to include its own props in addition to the theme props

mode , is a variable to choose in the theme the night or day mode that changes the text colors (is an example)

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>
    </>
  );
};

But I get the following error in the GlobalStyle component in Lint:

Type '{ mode: boolean; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes, any, any>> & Readonly<...> & Readonly<...>'. Property 'mode' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes, any, any>> & Readonly<...> & Readonly<...>'.ts(2322)

How can I fix this so I can type both props without getting that error?

Thanks in advance.

Answer 1

GlobalStyleProps doesn't have mode as props.

If you want to use mode, rename the prop.

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