如何根据反应中本地存储中的值更改来更改颜色

Question

const Navbar = ({ toggle, isOpen }) => {
  const data = localStorage.getItem("theme");

  return (
    <div className="bg-gray-300 shadow-md relative z-30 dark:bg-gray-800 transition duration-300 ease-in-out">
      <div className="mx-auto p-4 max-w-7xl">
        <nav>
          <div className="flex justify-between items-center">
            <Link to="/" className="mojLogo">
              <SvgLogo />
            </Link>
            <div className="flex items-center">
              <NavLinks />
              <div className="cursor-pointer md:hidden" onClick={toggle}>
                <Hamburger
                  toggled={isOpen}
                  color={data === "light" ? "#ff0" : "#dc0000"}
                />
              </div>
            </div>
          </div>
        </nav>
      </div>
    </div>
  );
};

export default Navbar;

这里有一段代码在读取第一个彩色页面时工作，它是根据本地存储中的深色或浅色值设置的。我对在不刷新页面的情况下更改本地存储中的值时如何更改颜色感兴趣。

Answer 1

首先想到的是 useLocalStorage React hook (https://usehooks.com/useLocalStorage/)。

我认为它会为你完成工作。