gatsby-plugin-dark-mode, вызывающий ошибку типа. Машинопись Гэтсби

Question

Layout получает это предупреждение, когда я нахожу его внутри index.tsx:

(псевдоним) const Layout: ({children}: Props) => JSX.Element import Layout Type ' {дети: Элемент []; } 'отсутствуют следующие свойства из типа' Props ': theme,> toggleThemets (2739)

Это index.tsx:

import Content from "../components/Content/Content"
import H1 from "../components/H1/H1"
import Heading from "../components/Heading/Heading"
import Layout from "../components/Layout/Layout"
import React from "react"
import SEO from "../components/seo"
import Section from "../components/Section/Section"

const IndexPage = () => (
  <Layout>
    <SEO
      title="hjkafhdj"
      description="fjdkslfh"
    />
    <H1 name="hdjsfhsjdk" />
    <Section>
      <Heading heading="fdhjsfh" />
      <Content>
        <p>
         fhdjskfsd
         fdhjskhfk
        </p>
      </Content>
    </Section>
  </Layout>
)

export default IndexPage

Это Layout.tsx:

import "./layout.sass"

import React, { ReactNode } from "react"
import { faMoon, faSun } from "@fortawesome/free-solid-svg-icons"

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { ThemeToggler } from "gatsby-plugin-dark-mode"

import Nav from "../Nav/Nav"

interface Props {
  theme: string
  toggleTheme: (theme: string) => void
  children: ReactNode
}

const Layout = ({ children }: Props) => {
  return (
    <div>
      <Nav />
      <main className="main-container">
        <ThemeToggler>
          {({ theme, toggleTheme }: Props) => (
            <div
              className="light-dark-btn"
              onClick={() => toggleTheme(theme === "dark" ? "light" : "dark")}
            >
              {theme === "dark" ? (
                <FontAwesomeIcon icon={faSun} />
              ) : (
                <FontAwesomeIcon icon={faMoon} />
              )}
            </div>
          )}
        </ThemeToggler>
        {children}
      </main>
    </div>
  )
}

export default Layout

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

Answer 1

Решено

Я удалил <ThemeToggler> из Layout.tsx и создал отдельный компонент. Это новый компонент ThemeControl.tsx:

import React from "react"
import { faMoon, faSun } from "@fortawesome/free-solid-svg-icons"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { ThemeToggler } from "gatsby-plugin-dark-mode"

interface Props {
  theme: string
  toggleTheme: (theme: string) => void
}

function ThemeControl() {
  return (
    <div>
      <ThemeToggler>
        {({ theme, toggleTheme }: Props) => (
          <div
            className="light-dark-btn"
            onClick={() => toggleTheme(theme === "dark" ? "light" : "dark")}
          >
            {theme === "dark" ? (
              <FontAwesomeIcon icon={faSun} />
            ) : (
              <FontAwesomeIcon icon={faMoon} />
            )}
          </div>
        )}
      </ThemeToggler>
    </div>
  )
}

export default ThemeControl

А это модифицированный Layout.tsx

import "./layout.sass"
import React, { ReactNode } from "react"
import Nav from "../Nav/Nav"

import ThemeControl from "../ThemeControl"

interface Props {
  children: ReactNode
}

const Layout = ({ children }: Props) => {
  return (
    <div>
      <Nav />
      <main className="main-container">
        <ThemeControl />
        {children}
      </main>
    </div>
  )
}

export default Layout