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

问题

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

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

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
}

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

回答1:

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
}

来源：https://stackoverflow.com/questions/42525035/antd-how-to-override-style-of-a-single-instance-of-a-component

标签

reactjs

antd