How can I reapply style classes that get removed by ThemeProvider?

user_8108042 0
Viewed 110

I'm trying to make a SPA with react and using styled-component for styling and theme changing. The problem i have when i add classes by Javascript and then try to change theme all the classes added by JavaScript are removed.

Can someone tell me what is the reason for this and how can i solve this problem?

Here is the example, where you'll see that when you scroll down on i add class to header with help of JavaScript to give bottom border but when i toggle theme with button then added class is removed.

const themeToggler = () => {
  theme === "light" ? setTheme("dark") : setTheme("light");
};

const StyleHeader = styled.header `
    background: ${(props) => props.theme.body};
  `;

function scrollPos(maxScrollPos) {
  let scrollPos = document.documentElement.scrollTop;

  if (scrollPos >= maxScrollPos) {
    addClassToElement("glow-shadow", ".header");
  } else {
    removeClassFromElement("glow-shadow", ".header");
  }
}
<ThemeProvider theme={theme==="light" ? light : dark}>
  <GlobalStyles />
  <StyleHeader className={`header pt-3 pb-3 fixed-top`}>
    <button onClick={themeToggler}>Toggle</button>
  </StyleHeader>

  <div className="content">
    scrool down to see border on header then click the toggle button to change the theme and border class will be removed
    <h1>h1</h1>
  </div>
  <h1 className="content">h1</h1>
  <h1 className="content">h1</h1>
  <h1 className="content">h1</h1>
</ThemeProvider>

twitter-bootstrap styled-components reactjs javascript
2 Answers

You need to run your scrollPos function after theme change. The theme switcher apparently removes all but the original classes on the element, so you need to replace them. Something like this, where we watch the theme property for changes:

import React, { useEffect } from "react";

export default function App() {
  ...

  useEffect(() => {
    scrollPos(100);
  }, [theme, scrollPos]);

  ...
};

Demo

user_12648040

I accepted the answer from @isherwood but i found another way so i would like to share it.

    import React, { useState} from "react";
    
    export default function App() {
      ...
    
      const [isScrolled, setIsScrolled] = useState(false);
    
    function scrollPos(maxScrollPos) {
      let scrollPos = document.documentElement.scrollTop;
    
      if (scrollPos >= maxScrollPos) {
        setIsScrolled(true);
      } else {
        setIsScrolled(false);
      }
    }
    window.addEventListener("scroll", (event) => {
       scrollPos(100);
    });
    return (
    <ThemeProvider theme={theme==="light" ? light : dark}>
      <GlobalStyles />
      <StyleHeader className={`nq-header pt-3 pb-3 fixed-top ${
            isScrolled ? "glow-shadow" : ""
        }`}>
        <button onClick={themeToggler}>Toggle</button>
      </StyleHeader>
    
      <div className="content">
        scrool down to see border on header then click the toggle button to change the theme and border class will be removed
        <h1>h1</h1>
      </div>
      <h1 className="content">h1</h1>
      <h1 className="content">h1</h1>
      <h1 className="content">h1</h1>
    </ThemeProvider>
    
     )};
user_81080420
Related