title: Antd: How to override style of a single instance of a component
body: <p>I'm using webpack to import the antd.less file in a global App.less file. Then I override some global styles and webpack bundles everthing:</p>
  
  <pre><code>// App.less
  @import "~antd/dist/antd.less";
  @import "./fonts.css";
  @import "./reactSplitPane.css";      
  
  @heading-color          : fade(#000, 100%);
  @text-color             : fade(#000, 100%);
  @text-color-secondary   : fade(#000, 100%);
  @disabled-color         : fade(#000, 25%);
  </code></pre>
  
  <p>My webpack 2 config looks like that:</p>
  
  <pre><code>    {
          test: /\.less$/,
          use: ExtractTextPlugin.extract({
              fallback: "style-loader",
              use: [
              { 
                  loader: "css-loader", 
                  options: { importLoaders: 1}
              },
              "less-loader"
              ]
          })
      },
      {
          test: /\.css$/,
          use: ExtractTextPlugin.extract({
              fallback: "style-loader",
              use: "css-loader"
          })
      }
  </code></pre>
  
  <p>Now, for example, I want to override the size of one instance of a Tabs component. What's the best way to do it?</p>
  
  <p>Example for overriding the color of the bottom-line of the Tabs-Bar:</p>
  
  <pre><code>.ipf-appbar {
      font-size: 24px; // this applies to all text in the Tabs component
      border-bottom: 1px solid darkmagenta; // also applies to all border
  }
  .ant-tabs-bar {
      border-bottom: 1px solid darkmagenta; // this applies only to the desired div but is global
  }
  </code></pre>
  
  <p>But this should be valid only for one component. The component looks like this (Typescript):</p>
  
  <pre><code>import * as ReactDOM from "react-dom";
  import * as React from "react";
  import { Tabs } from "antd";
  import "./AppBar.less";
  
  export class AppBar extends React.Component&lt;undefined, undefined&gt; {
      render() {
          return (
              // &lt;Tabs className="ipf-appbar"&gt;
              &lt;Tabs&gt;
                  &lt;Tabs.TabPane tab="Start" key="1"&gt;Start&lt;/Tabs.TabPane&gt;
                  &lt;Tabs.TabPane tab="Projekte" key="2"&gt;Projekte&lt;/Tabs.TabPane&gt;
              &lt;/Tabs&gt;
          );
      }
  }
  </code></pre>