Antd:如何覆盖组件单个实例的样式 [英] Antd: How to override style of a single instance of a component
问题描述
我正在使用 webpack 将 antd.less 文件导入到全局 App.less 文件中.然后我覆盖了一些全局样式和 webpack 包:
I'm using webpack to import the antd.less file in a global App.less file. Then I override some global styles and webpack bundles 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%);
我的 webpack 2 配置如下:
My webpack 2 config looks like that:
{
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"
})
}
现在,例如,我想覆盖一个 Tabs 组件实例的大小.最好的方法是什么?
Now, for example, I want to override the size of one instance of a Tabs component. What's the best way to do it?
覆盖标签栏底线颜色的示例:
Example for overriding the color of the bottom-line of the Tabs-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
}
但这应该只对一个组件有效.该组件如下所示(Typescript):
But this should be valid only for one component. The component looks like this (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>
);
}
}
推荐答案
您应该通过添加自定义 css 类/id 来使用 css 定位 Tabs
组件.然后您可以在您的 css 文件中自定义该类/ID.在您添加 .ipf-appbar
类的特定情况下,您可以按如下方式设置该特定组件的样式:
You should target Tabs
component with css by adding a custom css class / id. Then you can customize that class/id in your css file. In your specific case where you add .ipf-appbar
class you can style that specific component as follows:
.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
}
这篇关于Antd:如何覆盖组件单个实例的样式的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!