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

Question

我正在使用 webpack 将 antd.less 文件导入到全局 App.less 文件中。然后我覆盖一些全局样式和 webpack 捆绑一切：

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

覆盖选项卡栏底线颜色的示例：

.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 class / id 以 css 为目标 Tabs 组件。然后您可以在 css 文件中自定义 class/id。在您添加 .ipf-appbar class 的特定情况下，您可以按如下方式设置该特定组件的样式：

.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 文件并使用相同的 class antd 用途覆盖样式。

antd default

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

customized

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

Answer 3

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.TabPane tab="Start" key="1">Start</Tabs.TabPane>
                <Tabs.TabPane tab="Projekte" key="2">Projekte</Tabs.TabPane>
            </Tabs>
        );
    }
}

AppBar.less:

.temp {
  @import '~antd/lib/tabs/style/index.less';

  @tabs-ink-bar-color: red;
}

.ipf-appbar {
  .temp();
}

修改后的变量适用于单个实例。它更清晰和可扩展。

Answer 4

这个问题有点老了，但仍然有一个不那么静态且提供更多灵活性的答案。其他答案建议将自定义类添加到预期组件，然后通过来自 CSS 或 LESS 的自定义类来定位它的特定部分。

但 IMO 这不是一个完美的解决方案，因为它 隐藏了 JavaScript 的样式，所以如果您以后需要使用 JavaScript 更改它们，您将不得不再次四处寻找另一种解决方案来访问这些 CSS（或 LESS）规则以使用 JavaScript.

读取或操作它们

好消息是，还有一个更好、更现代的解决方案，它不会从 JavaScript 中隐藏 CSS，它是：CSS-in-JS。只需使用 Emotion or Styled-Components 等库即可。

示例： 例如，您可以如何使用 Emotion 的样式来设置 Ant's Search component 的单个实例的样式语法：

const StyledSearch = styled(Search)`
  & .ant-input-group > .ant-input:first-child,
  .ant-input-group-addon:first-child {
    border-radius: var(--border-radius1);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  & .ant-input-search-button {
    background-color: var(--color-primary);
    border-radius: var(--border-radius1) !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    & .anticon {
      color: var(--color-white);
    }
    &:hover {
      background-color: var(--color-primary);
    }
  }
`;

这会变成：

进入这个：

_{注意：您可以（并且建议）使用 Emotion 或 Ant 的主题功能来处理更严肃的用例，而不是像上面的示例那样使用 CSS 变量。}

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

Antd: How to override style of a single instance of a component

reactjs

antd