我是编程新手，现在我正在使用React with Typescript和样式化组件进行我的第一个项目。我试图为我的网站添加一个暗模式组件，但2天来我遇到了一个无法克服的问题。

这是我的应用程序.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>
  )
  }

我的风格.d.tsx

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

这是我无法解决的错误。

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

我试图使一个黑暗模式的主题转换器与黑暗的主题和光明的主题