useColorMode imported from Theme UI plugin in React-based GatsbyJS doesn't work due to "InvalidCharacterError: String contains an invalid character"

Question

我正在使用 @smakosh's GatsbyJS theme and Theme UI 插件；
我从 Hooks - useThemeUI and useColorMode;

useColorMode

我的整个代码完全正确；
我已经清除了GatsbyJS、npm和浏览器的缓存，但仍然出现同样的错误；
可以拿我的小包来分析：https://drive.google.com/file/d/1SsgPXAq9zMv8Yp4XDjy3MJLeWun-J3UQ/view?usp=sharing.

编译后出现两个错误：

TypeError: setMode is not a function;
InvalidCharacterError: String contains an invalid character:

检查我的全部代码：

/** @jsx jsx */

import { jsx, Styled, useColorMode } from 'theme-ui'
import { Context } from '../../common'
import SelectLanguage from './SelectLanguage'
import { Navegador, Input, Label, Submenu, StyledHeader } from './styles'

function Header() 
{
  const themes = ['deep', 'funk', 'future', 'swiss'];
  const modes = ['default', 'dark'];
  const [mode, setMode, setTheme, theme] = useColorMode()
  
  return (

    <Styled.root>
      <Context.Consumer>
        {({ toggleLanguage, lang }) => (
          <StyledHeader>
            <Navegador id="menu">
              <li>
                  <SelectLanguage lang={lang} toggleLanguage={toggleLanguage} />
              </li>

              <li>
                <Input id="modes" type="checkbox" name="menu"/>
                <Label for="modes">Modes</Label>
                <Submenu className="submenu">
                  <li onClick={e => setMode("default")}> Light </li>
                  <li onClick={e => setMode("dark")}> Dark </li>
                </Submenu>
              </li>

              <li>
                <Input id="themes" type="checkbox" name="menu"/>
                <Label for="themes">Themes</Label>
                <Submenu className="submenu">
                  <li onClick={e => setTheme("deep")}> Deep </li>
                  <li onClick={e => setTheme("funk")}> Funk </li>
                  <li onClick={e => setTheme("future")}> Futuristic </li>
                  <li onClick={e => setTheme("swiss")}> Swiss </li>
                </Submenu>
              </li>
              
            </Navegador>
          </StyledHeader>
        )}
      </Context.Consumer>
    </Styled.root>
  )
}

export default Header

Answer 1

查看您提供的证明 link，useThemeUI 钩子 return 值似乎包含 theme、components、colorMode 和 setColorMode 属性。您可以使用该挂钩代替 useColorMode 挂钩。并将 mode 和 setMode 变量分别更改为 colorMode 和 setColorMode。这可以解决 "setMode is not a function" 问题，同时仍然允许您访问主题属性。

同样的 setMode 问题可能是您遇到此 invalidCharacterError 的根本原因。因此，解决该问题也可能导致此错误消失。否则查看您应该使用的字符集。现在最常见的是utf8。如果您的应用程序包含变音符号、变音符号、象形文字 e.t.c，您可能必须使用相应的字符集 use-case。

还要验证 setTheme 是 useThemeUI 挂钩的 return 值的有效属性。与 setMode 非常相似，您提供的文档中未提及它。它很可能不存在。

useColorMode imported from Theme UI plugin in React-based GatsbyJS doesn't work due to "InvalidCharacterError: String contains an invalid character"

useColorMode imported from Theme UI plugin in React-based GatsbyJS doesn't work due to "InvalidCharacterError: String contains an invalid character"

javascript

jsx

reactjs

gatsby

theme-ui