Загрузка стилей в муравьиной дизайн пользовательского интерфейса для реакции компонентов

Question

я после следующего примера:

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

Код компонента и таблицы стилей описаны отдельно. Как включить css в компонент реакции?

Я попытался создать 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%; 
} 

И модифицируют один className (кнопка отправки) по адресу:

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

но WebPack говорит мне:

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

Как могу ли я включить таблицу стилей?

Answer 1

Препятствует вам, что вы также заявили об этом компоненте. Что вам нужно указать Classname в виде строки, как это:

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

Если кнопка не является компонентом, он должен быть «кнопка» вместо

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

Если то, что вы хотите использовать «встроенные стили», вы должны объявить стиль как смешивания, например:

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

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