网站搜索

如何在 Typescript Gatsby 中使用 ```gatsby-plugin-dark-mode```


我想要实现的

在 Typescript Gatsby 中使用 'gatsby-plugin-dark-mode'

到目前为止我所做的

  1. 通过 yarn add gatsby-plugin-dark-mode 安装 'gatsby-plugin-dark-mode'
  2. 在 gatsby-config.js 中包含 'gatsby-plugin-dark-mode'
module.exports = {
 plugins: ['gatsby-plugin-dark-mode'],
}
  1. 定义 ThemeToggler 组件并导入 'gatsby-plugin-dark-mode'
import React from 'react'
import { ThemeToggler } from 'gatsby-plugin-dark-mode'

class MyComponent extends React.Component {
  render() {
    return (
      <ThemeToggler>
        {({ theme, toggleTheme }) => (
          <label>
            <input
              type="checkbox"
              onChange={e => toggleTheme(e.target.checked ? 'dark' : 'light')}
              checked={theme === 'dark'}
            />{' '}
            Dark mode
          </label>
        )}
      </ThemeToggler>
    )
  }
}

然后 ...

Could not find a declaration file for module 'gatsby-plugin-dark-mode'. '/Desktop/my-blog/gatsby-casper/node_modules/gatsby-plugin-dark-mode/index.js' implicitly has an 'any' type.

我想要询问和帮助

  1. 我是不是忽略了什么??
  2. ‘gatsby-plugin-dark-mode’ 不支持 TypeScript 的 Gatsby 吗?
  3. 如果在 TypeScript Gatsby 中使用 'gatsby-plugin-dark-mode' 是可能的,请告诉我我在这里遗漏了什么。

答案#1

如果你还没有,请在项目根目录下创建一个名为 global.d.ts 的全局接口文件,然后添加以下内容:

declare module 'gatsby-plugin-dark-mode';

你可以将此代码片段用于任何抛出该错误且没有发布类型的包。