解决这个问题的一个好方法是使用redux或API。我会选择useContext来保持它的简单。
在您的App.js中，您可以如下设置上下文：

const ThemeContext = createContext(null); // keep in mind that you can set anything to creatContext as default values.

export default function MyApp() {
  return (
    <ThemeContext.Provider value="dark">
      <NavBar/>
      // add more components here that can use the default colors
    </ThemeContext.Provider>
 )
}

然后在任何组件中，您都可以使用useContext，如下所示：

function Panel({ title, children }) {
  const theme = useContext(ThemeContext);
  const className = 'panel-' + theme;
  return (
    <section className={className}>
      <h1>{title}</h1>
      {children}
    </section>
  )
}

function Button({ children }) {
  const theme = useContext(ThemeContext);
  const className = 'button-' + theme;
  return (
    <button className={className}>
      {children}
    </button>
  );
}

您可以从这里阅读更多关于useContext API的信息useContext
希望能有所帮助！

添加一个css类到body来保存主题状态，如dark，在你的css文件中，使用body.dark选择器来监听主题的变化。

const toggleTheme = () => {
  setTheme((theme) => (theme === 'dark' ? 'light' : 'dark'));
  document.body.classList.toggle("dark");
}

在css中，尝试类似于：

body.dark {
  background-color: darkred;
}

body.dark .PostBtn {
  background-color: black;
  color: white;
}

有两条路可走。
1.使用useContext保存主题值并在App.js中调用
1.在App.js中设置状态并在NavBar.js中更改状态
第二种方法是：
app.js

const[theme, setTheme] = useState('dark');
...
<NavBar theme={theme} setTheme={setTheme} .../>
...

NavBar.js

function NavBar(props){

   const {theme,setTheme} = props

   const toggleTheme = () => {
    setTheme((theme) => (theme === 'dark' ? 'light' : 'dark'));

    if(theme === 'dark')
    {
        document.body.style = 'background: red;';
    }
    else{
        document.body.style = 'background: white;';
    }

   }
...

如果您不想使用上下文，那么您完全可以使用一个简单的useEffect来切换主题和根类，并使用CSS选择器来实现组件样式的变化。

• • 示例**

第一，一个组件具有：

• theme的状态
• 用于切换theme的按钮
• 每次切换主题时重新运行的useEffect
• 这个useEffect只是将document.body的css类设置为theme的值。

const defaultTheme = "light";

const NavBar = () => {
  const [theme, setTheme] = useState(defaultTheme);
  useEffect(() => {
    document.body.setAttribute("class", theme);
  }, [theme]);

  return (
    <nav>
      <h3>Navbar</h3>
      <Button
        className="my-custom-button"
        onClick={() =>
          setTheme((prev) => (prev === "light" ? "dark" : "light"))
        }
      >
        Toggle theme ({theme})
      </Button>
    </nav>
  );
};

上面使用的定制按钮组件定义如下

const Button = ({
  children,
  ...props
}: PropsWithChildren<React.ButtonHTMLAttributes<HTMLButtonElement>>) => {
  // ...
  return <button {...props}>{children}</button>;
};

使用CSS为我们的自定义<Button className="my-custom-button" ... />创建主题

// global button styles
.my-custom-button {
  border-radius: 5px;
  padding: 2px 5px;
}

// dark theme button styles
.dark * .my-custom-button {
  background-color: black;
  color: white;
}

// light theme button styles
.light * .my-custom-button {
  background-color: hotpink;
  color: black;
}

一个codesandbox，它实际演示了这一点