Gewusst wie: anpassen von Ant.design-Stile
Wer weiß, wie das anpassen Ant.design-Stile in der richtigen Art und Weise?
Ich zum Beispiel ändern möchten, die Standard-Hintergrundfarbe und die Höhe der Header-Abschnitt:
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>
)
}
}
Ist es ok, oder gibt es einen besseren Weg, um persönliche Stile?
Weil ich habe nicht gefunden, einige Komponente Attribute oder smth. wie diese.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Antd hat externized die meisten Ihrer styling-variable in WENIGER Variablen
wie Sie sehen können, in
https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less
Überschreiben die Variablen, die Sie verwenden müssen
modifyVar
Funktion von WENIGERfinden Sie mehr über die Thematisierung hier
So zu deiner konkreten Frage,
@layout-header-background
macht den jobMein persönlicher Ansatz ( ich arbeite mit dva-cli obwohl ):
jedesmal, wenn ich brauche, um das überschreiben der css verwende ich ein css liegt im gleichen Ordner, die ich schrieb, und importieren Sie es wie:
yourcomponent.js
...
import styles von './yourstylesheet.css';
...
< AntdComponent className= {styles.thestyle} />
yourstylesheet.css
.thestyle {
background-color : '#555555';
}
<Button style={{backgroundColor:"#dedede", width:20, height:10}}/>
Override der Komponente Stil
Wegen der besonderen Bedürfnisse des Projekts, wir treffen uns Häufig die Notwendigkeit, zur Abdeckung der Komponente Stil, hier ist ein einfaches Beispiel.
Überschreiben Sie die Komponente Stil
In der weniger-Datei(wie css), die Sie behandeln können persönliche Stile. Für
Beispiel in deinem Fall
Wenn Sie Ant-Karte
Ich hoffe, Sie können verstehen nun