Как я могу стилизовать пример вкладок из blueprintjs?

Я пытаюсь использовать 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 />}
          />
...

Но я все равно получаю ту же страницу с простым текстом. Как мне оформить этот пример так, чтобы он выглядел так же, как в их документации?

Спасибо


reactjs typescript blueprintjs
person P.Gracia    schedule 04.01.2020    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Вы можете использовать свой собственный css в своем компоненте, который можно импортировать в область импорта из вашего компонента:

импортировать "@blueprintjs/core/lib/css/blueprint.css";

person ATud    schedule 05.06.2020

arrow_upward
0
arrow_downward

Если вы используете CSS, вы должны иметь возможность просто импортировать файлы CSS из пакетов чертежей в свой файл index.js.

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";
person Randall    schedule 08.10.2020