web-dev-qa-db-ja.com

Ant.designスタイルをカスタマイズする方法

Ant.designスタイルを適切にカスタマイズする方法を知っている人はいますか？

たとえば、ヘッダーセクションのデフォルトのbackgroundColorと高さを変更します。

import React, { Component } from 'react';
import { Form, Layout } from 'antd';
const { Header, Footer, Sider, Content } = Layout;

export default class Login extends Component {

render () {
    return (
        <div>
            <Layout>
                <Header style={{backgroundColor: '#555555', height: '5vh'}}>header</Header>
                <Layout>
                    <Content>main content</Content>
                </Layout>
                <Footer>footer</Footer>
            </Layout>
        </div>
    )
}
}

大丈夫ですか、それともスタイルをカスタマイズするより良い方法がありますか？一部のコンポーネントの属性またはsmthが見つからないためです。このような。

javascriptcssreactjsantd
8
Dmitry

Antdは、スタイル変数のほとんどをLESS変数で外部化しました

あなたが見ることができるように

https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less

これらの変数を上書きできるようにするには、LESSのmodifyVar関数を使用する必要があります

あなたはテーマについての詳細を見つけることができます ここ

だからあなたの特定の質問に、@layout-header-background仕事をします

5
Yichaoz

私の個人的なアプローチ（私はdva-cliで作業しています）：cssをオーバーライドする必要があるたびに、書いた同じフォルダーにあるcssを使用して、次のようにインポートします。

yourcomponent.js
...
インポート スタイル './yourstylesheet.css'から;
...
<AntdComponent className = {styles.thestyle} />

yourstylesheet.css
。スタイル {
background-color： '＃555555';
}

7
Lowla

Lessファイル（CSSのような）では、カスタマイズされたスタイルを処理できます。たとえばあなたの場合

.ant-layout-header{ height: 100vh;
                   background-color:#f50;
                  }

Antカードを使用する場合

.ant-card-head{color:#j14}

あなたが今理解できるといいのですが

1
jayanes

コンポーネントスタイルをオーバーライドする

プロジェクトの特別なニーズのために、コンポーネントスタイルをカバーする必要性にしばしば応えます。これが簡単な例です。

コンポーネントスタイルを上書きする

1
afc163

上記のアプローチは、ヘッダーのような単純なコンポーネントで機能しますが、スタイルのネストの優先順位のため、メニュー、タブ、折りたたみ、選択などの複雑なコンポーネントでは常に機能するとは限りません。仕事では、jayanesによって記述されたアプローチを使用しますが、ネストされたAnt Designクラスに進んでいきます。次の例で説明します。「antd」からタブをインポートする場合、スタイルをオーバーライドするタグはTabsとTabPaneの2つだけです。

<div className={styles.tabsContainer}>
    <Tabs className={styles.tabs}>
        <TabPane className={styles.tabPane}>
            Tab 1 Title
        </TabPane>
    </Tabs>
</div>

しかし、このantdコンポーネントは非常に複雑な構造を持っています。開発ツールで確認できます：.ant-tabs-bar、.ant-tabs-nav-container、.ant-tabs-tab-prev、.ant-tabs-tab-next、.ant-tabs-nav- wrap、.ant-tabs-nav-scroll、.ant-tabs-tab-active、.ant-tabs-ink-barなど。行く方法は次のとおりです：lessファイルでは、独自の親コンポーネントのclassName内に.ant -...クラスをネストします（コードのコンパイル後にアプリ全体のすべてのantdクラスをオーバーライドしないようにするため） 。独自のCSSプロパティをそこに記述します。次に例を示します。

.tabsContainer {
    .ant-tabs-tab-active {
        background: #fff266;
        color: #31365c;
        &:hover {
            color: darken(#31365c, 5%);
        }
    }
    .ant-tabs-ink-bar {
        background: #fff266;
    }
}

さらに詳細な説明が必要な場合は、YouTubeに投稿したAntデザインコンポーネント-タブのカスタマイズ方法に関するビデオを参照してください。

0
Tania Shulga