如何在blueprintjs v3中的react应用程序中切换所有子组件的主题（浅色和深色）？

Question

我正在用 React 编写一个应用程序，需要一种在深色模式和浅色模式之间切换的方法。我在 blueprintjs 文档中找不到任何提到如何使用某些父 prop 配置更改所有子组件的主题的文档。

Answer 1

在根容器中使用类名.bp3-dark，如下所示。

Blueprint 提供两种 UI 颜色主题：浅色和深色。默认情况下，浅色主题处于活动状态。可以通过将 bp3-dark 类添加到容器元素来应用深色主题，以对所有嵌套元素进行主题化。

import React from 'react';

import {Navigation} from "./Navigation";
import Main from "./Main";

const App = () => (
    <div className="bp3-dark">
      <Navigation />
      <Main />
    </div>
  );

export default App;