How can I solve the "Type '{ body: string; text: string; }' is not assignable to type 'DefaultTheme" on React with typescript

Question

I am new in programming and now I am working on my first project using React with Typescript and styled components. I am trying to add a dark mode component for my website but for 2 days I encountered a problem that I cannot overcome.

This is my App.tsx:

const App = () => {
  const [theme, setTheme] = useState('light');
  const themeToggler = () => {
    theme === 'light' ? setTheme('dark') : setTheme('light')
}

  return (
      <ThemeProvider theme = {theme === 'light' ? lightTheme : darkTheme}>
        <>
      <Navbar />
      <button onClick={themeToggler}>Switch Theme </button>
      <GlobalStyle text={""} body={""} background={""} toggleBorder={""} />
      {<Routes location={location} key={location.pathname}>
        <Route path='/' element={<MainPage />} />
        <Route path='/about' element={<About />} />
        <Route path='/portfolio' element={<Portfolio />} />
        <Route path='/contact' element={<Contact />} />
      </Routes> }
        </>
      </ThemeProvider>
  )
  }

My styled.d.tsx

declare module 'styled-components' {
  export interface DefaultTheme {
    background: string
    toggleBorder: string
    text: string
    body: string
  }
  export interface ColorsInterface {
    primary: string
    secondary: string
  }
}

This is the error that I can not solve.

Type '{ body: string; text: string; }' is not assignable to type 'DefaultTheme | ((theme: DefaultTheme) => DefaultTheme)'.
  Type '{ body: string; text: string; }' is missing the following properties from type 'DefaultTheme': background, toggleBorderts(2322)
index.d.ts(350, 5): The expected type comes from property 'theme' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<ThemeProviderProps

I am trying to make a dark mode theme changer with dark theme and light theme

Answer 1

I believe you got this error because you interface DefaultTheme defines the propreties background: string, toggleBorder: string, text: string, body: string and this object Type '{ body: string; text: string; }' hasn't all pripreties.