英文:
Context API with Styled Components Error: setTheme is not a function
问题
以下是您要翻译的内容：
在首次使用上下文 API 并尝试使用 styled-components 实现应用程序中的暗模式时，尝试切换主题时出现错误 setTheme 未定义。
App.js
import { ThemeContext, ThemeProviderWrapper } from "./context/ThemeContext";import { ThemeProvider } from "styled-components";import { lightTheme, darkTheme } from "./theme";import Home from "./pages/Home";import GlobalStyles from "./styles/Global.styled";import { Outlet } from "react-router-dom";import { useContext } from "react";const App = () => {const { theme } = useContext(ThemeContext);return (<ThemeProviderWrapper><ThemeProvider theme={theme === "light" ? lightTheme : darkTheme}><Home /><Outlet /><GlobalStyles /></ThemeProvider></ThemeProviderWrapper>);};export default App;
在上下文文件中，我有以下内容：
import React, { useState, createContext } from "react";export const ThemeContext = createContext({theme: "light",setTheme: () => {},});export const ThemeProviderWrapper = ({ children }) => {const [theme, setTheme] = useState("light");return (<ThemeContext.Provider value={{ theme, setTheme }}>{children}</ThemeContext.Provider>);};
而在我尝试切换主题的组件中，我有以下内容：
import {Navbar,StyledFontAwesomeIcon,ToggleSwitch,ToggleSwitchText,Title,} from "../styles/Navbar.styled";import { faMoon } from "@fortawesome/free-regular-svg-icons";import { useContext } from "react";import { ThemeContext } from "styled-components";const Header = () => {const { theme, setTheme } = useContext(ThemeContext);const handleClick = () => {setTheme(theme === "light" ? "dark" : "light");};return (<Navbar><Title>Where in the world?</Title><ToggleSwitch onClick={handleClick}><StyledFontAwesomeIcon icon={faMoon} /><ToggleSwitchText>Dark Mode</ToggleSwitchText></ToggleSwitch></Navbar>);};export default Header;
英文:
I am using context API for the first time and trying to implement dark mode in an application using styled components. When trying to toggle the theme, I get the error setTheme is not defined.
App.js
import { ThemeContext, ThemeProviderWrapper } from "./context/ThemeContext";import { ThemeProvider } from "styled-components";import { lightTheme, darkTheme } from "./theme";import Home from "./pages/Home";import GlobalStyles from "./styles/Global.styled";import { Outlet } from "react-router-dom";import { useContext } from "react";const App = () => {const { theme } = useContext(ThemeContext);return (<ThemeProviderWrapper><ThemeProvider theme={theme === "light" ? lightTheme : darkTheme}><Home /><Outlet /><GlobalStyles /></ThemeProvider></ThemeProviderWrapper>);};export default App;
In the context file I have this:
import React, { useState, createContext } from "react";export const ThemeContext = createContext({theme: "light",setTheme: () => {},});export const ThemeProviderWrapper = ({ children }) => {const [theme, setTheme] = useState("light");return (<ThemeContext.Provider value={{ theme, setTheme }}>{children}</ThemeContext.Provider>);};
And in the component where I'm attempting to theme switch, I have this:
import {Navbar,StyledFontAwesomeIcon,ToggleSwitch,ToggleSwitchText,Title,} from "../styles/Navbar.styled";import { faMoon } from "@fortawesome/free-regular-svg-icons";import { useContext } from "react";import { ThemeContext } from "styled-components";const Header = () => {const { theme, setTheme } = useContext(ThemeContext);const handleClick = () => {setTheme(theme === "light" ? "dark" : "light");};return (<Navbar><Title>Where in the world?</Title><ToggleSwitch onClick={handleClick}><StyledFontAwesomeIcon icon={faMoon} /><ToggleSwitchText>Dark Mode</ToggleSwitchText></ToggleSwitch></Navbar>);};export default Header;
答案1
得分: 1
Your ThemeContext import is wrong in the component where you are attempting this. Rather than importing from 'styled-components', import it from your context provider file.
import { ThemeContext } from '你主题上下文提供者的路径'
英文:
Your ThemeContext import is wrong in the component where you are attempting this.Rather than importing from 'styled-components' import it from your context provider file.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
import { ThemeContext } from 'path of your theme context provider'
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论