0

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

我想使用他们核心库中的Tabs组件，只是为了了解如何使用它，我决定使用他们提供的示例，并尝试使用它。为此，我创建了一个新项目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 />}
          />
...

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

谢谢

4

2 回答 2

0

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

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

于 2020-06-05T05:54:23.733 回答
0

如果您使用 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";
于 2020-10-08T19:05:28.037 回答