Antd: comment redéfinir le style d'une seule instance d'un composant

Question

J'utilise webpack pour importer le fichier antd.less dans un fichier App.less global. Puis-je remplacer certains styles globaux et faisceaux webpack everthing:

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

Mon webpack 2 config ressemble que:

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

Maintenant, par exemple, je veux passer outre la taille d'une instance d'un Tabs composant. Quelle est la meilleure façon de le faire?

Exemple pour des raisons impérieuses la couleur de la ligne de fond des onglets-Bar:

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

Mais cela devrait être valable que pour un seul composant. Le composant ressemble à ceci (Tapuscrit):

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

Vous devez cibler Tabs composant avec css en ajoutant une classe/id css personnalisé. Ensuite, vous pouvez personnaliser cette classe/id dans votre fichier css. Dans votre cas précis où vous ajoutez .ipf-appbar classe que vous pouvez définir le style que composant spécifique comme suit:

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