Question

我使用webpack在全局App.less文件中导入antd.less文件。然后我覆盖了一些全局样式和webpack bundle 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配置如下：

    {
        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组件的一个实例的大小。最好的方法是什么？

覆盖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）：

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来使用css定位Tabs组件。然后，您可以在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
}

Answer 2

一个简单的解决方案是为该组件创建一个 css 文件并使用 antd 使用的相同类覆盖样式。

<块引用>

antd 默认

.ant-menu-dark .ant-menu-item,
.ant-menu-dark .ant-menu-item-group-title,
.ant-menu-dark .ant-menu-item > a,
.ant-menu-dark .ant-menu-item > span > a {
  color: rgba(255, 255, 255, 0.65);
}

<块引用>

定制

.ant-menu-dark .ant-menu-item,
.ant-menu-dark .ant-menu-item-group-title,
.ant-menu-dark .ant-menu-item > a,
.ant-menu-dark .ant-menu-item > span > a {
  color: #e9631a !important;
}

Antd：如何覆盖组件的单个实例的样式

2 个答案: