Antd：コンポーネントの1つのインスタンスのスタイルをオーバーライドする方法

Question

webpackを使用して、グローバルなApp.lessファイルでantd.lessファイルをインポートしています。そして、私はいくつかのグローバルスタイルを上書きし、WebPACKのはeverthingバンドル：

は

{ 
     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" 
     }) 
    } 

今、例えば、私はタブの1つのインスタンスのサイズを上書きしたい：私のWebPACK 2設定がそのように見える

// 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%); 

成分。それを行う最良の方法は何ですか？

タブ・バーの下のラインの色を上書きする例：

.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 
} 

しかし、これは、ただ1つのコンポーネントに対して有効にする必要があります。コンポーネントは、この（活字体）のようになります。あなたはカスタムCSSクラス/ IDを追加することにより、CSSでTabsコンポーネントをターゲットとすべき

import * as ReactDOM from "react-dom"; 
import * as React from "react"; 
import { Tabs } from "antd"; 
import "./AppBar.less"; 

export class AppBar extends React.Component<undefined, undefined> { 
    render() { 
     return (
      // <Tabs className="ipf-appbar"> 
      <Tabs> 
       <Tabs.TabPane tab="Start" key="1">Start</Tabs.TabPane> 
       <Tabs.TabPane tab="Projekte" key="2">Projekte</Tabs.TabPane> 
      </Tabs> 
     ); 
    } 
} 

Answer 1

。その後、あなたのCSSファイルでそのクラス/ IDをカスタマイズすることができます。次のように.ipf-appbarクラスを追加するには、特定のケースでは、その特定のコンポーネントのスタイルを設定することができます

.ipf-appbar .ant-tabs-bar { 
    font-size: 24px; // this applies to all text in the Tabs component 
    border-bottom: 1px solid darkmagenta; // also applies to all border 
}