javascript - 如何在blueprintjs v3中的 react 应用程序中为所有子组件切换主题(浅色和深色)？

Question

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

Answer 1

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

Blueprint provides two UI color themes: light and dark. The light theme is active by default. The dark theme can be applied by adding the class bp3-dark to a container element to theme all nested elements.

import React from 'react';

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

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

export default App;