styles de chargement dans la conception de fourmi ui pour réagir composants

Question

I suivant l'exemple suivant:

https://github.com/ant-design/ant-design/blob/master/components/form/demo/normal-login.md

Le code du composant et la feuille de style sont décrits séparément. Comment dois-je inclure le CSS dans le composant de réaction?

J'ai essayé de créer un fichier login.css:

#components-form-demo-normal-login .login-form { 
    max-width: 300px; 
} 
#components-form-demo-normal-login .login-form-forgot { 
    float: right; 
} 
#components-form-demo-normal-login .login-form-button { 
    width: 100%; 
} 

Et puis modifié un className (le bouton d'envoi) à:

import styles from './login.css';  
<Button type="primary" htmlType="submit" className={styles.login-form-button}> 
    Log in 
</Button> 

mais webpack me dit:

42:76 error 'form' is not defined no-undef 
42:81 error 'button' is not defined no-undef 

Comment puis-je inclure la feuille de style?

Answer 1

Permet de dire que vous avez également déclaré le composant. Qu'est-ce que vous avez besoin est de spécifier le nom de classe comme une chaîne comme ceci:

import './login.css';  
<Button id="your-id" type="primary" htmlType="submit" className="your-class-name"> 
    Log in 
</Button> 

Si bouton est un composant, il devrait être « bouton » au lieu

import './login.css';  
<button id="your-id" type="primary" htmlType="submit" className="your-class-name"> 
    Log in 
</button> 

Si ce que vous voulez est d'utiliser « styles en ligne », vous devez déclarer le style comme mélange, comme ceci:

var styles = { 
    someStyle: { ..props} 
} 

<button id="your-id" type="primary" htmlType="submit" style={styles.someStyle}> 
    Log in 
</button>