Antd : 구성 요소의 단일 인스턴스 스타일 재 지정 방법

Question

webpack을 사용하여 전역 App.less 파일에서 antd.less 파일을 가져오고 있습니다. 그럼 몇 가지 전역 스타일을 무시하고 웹팩은 모든게 번들 :

이

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

자, 예를 들어, 내가 탭의 한 인스턴스의 크기를 대체하려면 : 내 웹팩이 설정은 그 모양

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

그러나 이것은 단지 하나 개의 구성 요소에 대해 유효해야합니다. 구성 요소는이 (타이프)과 같은 : 당신은 사용자 정의 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 
}