Я использую webpack для импорта файла antd.less в глобальный файл App.less. Затем я переопределяю некоторые глобальные стили и пакеты веб-пакетов:
// 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
}
Но это должно быть действительно только для одного компонента. Компонент выглядит так (Typescript):
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>
);
}
}