如何从 blueprintjs 设置“选项卡示例”的样式？答案

【问题标题】：How can I style "Tabs Example" from blueprintjs?如何从 blueprintjs 设置“选项卡示例”的样式？
【发布时间】：2020-01-04 08:43:34
【问题描述】：

我正在尝试在一个小项目中使用 BlueprintJs，但我遇到了一个问题，即样式没有像我预期的那样出现。我确信这很简单，我希望有人能指出我正确的方向。

我想使用他们核心库中的Tabs 组件，只是为了了解如何使用它，我决定使用the example they provide，并尝试使用它。为此，我使用 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 理解的类名来尝试提供一些样式，我的 <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 />}
          />
...

但我仍然得到相同的纯文本页面。如何设置此示例的样式，使其看起来与文档中的样式相同？

谢谢

【问题讨论】：

标签： reactjs typescript blueprintjs

【解决方案1】：

你可以在你的组件中使用自己的css，可以从你的组件的导入区导入：

导入“@blueprintjs/core/lib/css/blueprint.css”；

【讨论】：

【解决方案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";

【讨论】：