我如何从blueprintjs设计"Tabs示例“？

Question

我正试图在一个小项目中使用BlueprintJs，我想出了一个问题，在这个问题上，样式并没有像我预期的那样出现。因为我确信这是很简单的事情，我希望有人能给我指明正确的方向。

我想从他们的核心库中使用选项卡组件，为了获得如何使用它的感觉，我决定使用他们提供的例子，并使用它。为此，我使用npx create-react-app MyApp --template typescript创建了一个新项目，将以前包含在新组件中的GitHub链接中的文本包括进来，并从App.tsx导入和加载该组件：

...

import { TabsExample } from "./tabs-example";

const App: React.FC = () => {
  return (
    <div className="App">
      <TabsExample id="tabs-example" />
    </div>
  );
};

其中，TabsExample只是BlueprintJs的原始组件示例。起初，我希望运行该应用程序并获得与文档中相同的外观，因为我认为BlueprintJs组件已经附带了一些默认的样式，但是我得到了一个纯文本页面，没有样式和选项卡：

由于样式显然不是预定义的，所以我想包括一些具有BlueprintJs理解的值的classNames来尝试并提供一些样式，我的<Tabs>和<Tab>组件现在看起来如下所示：

...
<Tabs
          animate={this.state.animate}
          className={`${Classes.TABS}`} // New added attribute
          id="TabsExample"
          key={this.state.vertical ? "vertical" : "horizontal"}
          renderActiveTabPanelOnly={this.state.activePanelOnly}
          vertical={this.state.vertical}
        >
          <Tab
            className={`${Classes.TAB_PANEL} react`} // New added attribute
            id="rx"
            title="React"
            panel={<ReactPanel />}
          />
...

但我还是得到了同样的纯文本页面。我如何对这个示例进行样式设计，使其看起来与文档中的样式相同？

谢谢

Answer 1

您可以在组件中使用他们自己的css，这些css可以从您的组件导入到导入区域：

导入"@blueprintjs/core/lib/css/blueprint.css"；

Answer 2

如果使用CSS，您应该能够简单地从index.js文件中的蓝图包中导入CSS文件。

import "@blueprintjs/core/lib/css/blueprint.css";
import "@blueprintjs/icons/lib/css/blueprint-icons.css";

或者如果您使用SCSS

@import "@blueprintjs/core/src/blueprint.scss";
@import "@blueprintjs/icons/src/blueprint-icons.scss";
@import "@blueprintjs/core/lib/scss/variables.scss";