title: How can I style "Tabs Example" from blueprintjs?
body: <p>I'm trying to use BlueprintJs in a small project and I'm coming up with a problem where the style does not appear as I would expect. As I'm sure it's something quite simple I hope someone can point me in the right direction. </p>
  
  <p>I want to use the <a href="https://blueprintjs.com/docs/#core/components/tabs" rel="nofollow noreferrer">Tabs</a> component from their core library and just to get the feeling on how to use it I decided to use <a href="https://github.com/palantir/blueprint/blob/develop/packages/docs-app/src/examples/core-examples/tabsExample.tsx" rel="nofollow noreferrer">the example they provide</a>, and play around with it. To do so, I created a new project with <code>npx create-react-app MyApp --template typescript</code>, included the text within the GitHub link previously included into a new component, and imported and loaded that component from App.tsx:</p>
  
  <pre class="lang-js prettyprint-override"><code>...
  
  import { TabsExample } from "./tabs-example";
  
  const App: React.FC = () =&gt; {
    return (
      &lt;div className="App"&gt;
        &lt;TabsExample id="tabs-example" /&gt;
      &lt;/div&gt;
    );
  };
  </code></pre>
  
  <p>Where <strong>TabsExample</strong> is just the raw component example from BlueprintJs. At first I was expecting to run the app and obtain the <em>same look</em> as they have in their documentation, as I thought that BlueprintJs components already come with some default styling, but instead I get a plain text page, with no style nor tabs whatsoever: <a href="https://i.stack.imgur.com/3YA1u.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3YA1u.png" alt="Outcome of the raw code"></a> As apparently styles do not come predefined I thought of including some classNames with values BlueprintJs understands to try and provide some styling, and my <code>&lt;Tabs&gt;</code> and <code>&lt;Tab&gt;</code> components now look like this:</p>
  
  <pre class="lang-js prettyprint-override"><code>...
  &lt;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}
          &gt;
            &lt;Tab
              className={`${Classes.TAB_PANEL} react`} // New added attribute
              id="rx"
              title="React"
              panel={&lt;ReactPanel /&gt;}
            /&gt;
  ...
  </code></pre>
  
  <p>But I still get that same plain text page. How can I style this example so that it looks the same way as it does in their documentation?</p>
  
  <p>Thank you</p>