Antd：如何重寫一個組件

我使用的WebPack導入在全球App.less文件antd.less文件的單個實例的風格。然後我重寫一些全球性的風格和的WebPack捆綁寄託都：Antd：如何重寫一個組件

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

我的WebPack 2的配置看起來像這樣：

現在

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

，比如我要重寫一個標籤的一個實例的大小零件。什麼是最好的方式來做到這一點？

用於重寫標籤-欄的底線的顏色

實施例：

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

但這應僅用於一種組分是有效的。該組件看起來像這樣（打字稿）：

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> 
     ); 
    } 
}

來源

2017-03-01 Knack

請添加到您的html代碼，這樣我可以讓我的例子更具體 –

我使用的是TS反應。查看我的更新。 – Knack

則應該通過添加自定義的CSS類/ ID目標Tabs組件使用CSS。然後你可以在你的css文件中自定義這個class/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 
}

來源

2017-03-01 07:17:35

我將如何重寫此組件的給定「嵌套」類？例如。 '.ant-tabs-bar {border-bottom：1px solid darkmagenta; }'。它只應用於一個實例。 – Knack

我需要添加一個空格...'.ipf-趙軍陽張志利appbar的選項卡，bar'。完美的作品。乾杯! – Knack

Antd：如何重寫一個組件

回答

相關問題