0
256
ViewsHow to implement Theme Switcher From a React Component
I am making a small react project and I was happy with my progress and decide to create a dark theme. I've found a way to make it work inside the app tsx file in which I have linked. But I want to put that button in my navbar component. The problem is my main app tsx div takes in the data-theme={theme} code. My question is how will I pass in the 'theme' from an external component? I've linked images to my app.tsx, navbar.tsx, app.css, and project structure.
·
Juan Pablo Isaza
1 answers
Answer question0
You can pass your switchTheme function as a prop to Navbar, and then call switchTheme from inside the Navbar component.
For example, inside your App component you'd do this:
<Navbar switchTheme={switchTheme} />
And in your Navbar component:
function Navbar({switchTheme}){
return(
<button onClick={switchTheme}>Switch Theme</button>
)
}
·
Juan Pablo Isaza
Report
Answer question