web-dev-qa-db-fra.com

Comment personnaliser les styles Ant.design

Qui sait comment personnaliser correctement les styles Ant.design?

Par exemple, je souhaite modifier la couleur de fond et la hauteur par défaut de la section En-tête:

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

Est-ce correct ou existe-t-il une meilleure façon de personnaliser les styles? Parce que je n'ai pas trouvé les attributs ou smth de certains composants. comme ça.

javascriptcssreactjsantd
8
Dmitry

Antd a externalisé la plupart de sa variable de style en MOINS variables

comme vous pouvez le voir dans

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

Pour pouvoir remplacer ces variables, vous devez utiliser la fonction modifyVar de LESS

vous pouvez en savoir plus sur le thème ici

Donc, pour votre question spécifique, @layout-header-background Fait le travail

5
Yichaoz

Mon approche personnelle (je travaille avec dva-cli cependant): chaque fois que j'ai besoin de remplacer le css, j'utilise un css situé dans le même dossier que j'ai écrit et je l'importe tel que:

yourcomponent.js
...
importer modes de './yourstylesheet.css';
...
<AntdComponent className = {styles.thestyle} />

yourstylesheet.css
.le style {
couleur de fond: '# 555555';
}

7
Lowla

Dans le fichier less (comme un css), vous pouvez gérer des styles personnalisés. Par exemple dans votre cas

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

Si vous utilisez la carte Ant

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

J'espère que tu peux comprendre maintenant

1
jayanes

Remplacer le style de composant

En raison des besoins particuliers du projet, nous répondons souvent à la nécessité de couvrir le style de composant, voici un exemple simple.

remplacer le style de composant

1
afc163

Les approches mentionnées ci-dessus fonctionnent pour les composants simples comme l'en-tête, mais ne fonctionnent pas toujours pour les composants complexes comme le menu, les onglets, la réduction, la sélection et d'autres, en raison de la priorité d'imbrication des styles. Au travail, nous utilisons l'approche décrite par jayanes mais nous allons plonger dans les classes Ant Design imbriquées. Permettez-moi de l'expliquer dans l'exemple suivant: lorsque vous importez des onglets depuis "antd", vous n'avez que 2 balises pour remplacer les styles pour: Tabs et TabPane.

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

Mais ce composant antd a une structure très complexe. Vous pouvez vérifier dans les outils de développement: il a .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 et autres. La voie à suivre est la suivante: dans votre fichier less, imbriquez les classes .ant -... à l'intérieur du nom de classe de votre propre composant parent (afin d'éviter de remplacer toutes les classes antd dans toute l'application après la compilation du code) . Écrivez-y vos propres propriétés css, par exemple:

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

Si vous avez encore besoin d'explications plus détaillées, veuillez vous référer à la vidéo que j'ai publiée sur YouTube sur la façon de personnaliser les composants Ant Design - onglets.

0
Tania Shulga