Loading styles in ant design ui for react components

Question

I following the next example:

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

The code of the component and the stylesheet are described separately. How must I include the css in the react component?

I tried creating a login.css file:

#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%;
}

And then modified one className (the submit button) to:

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

but webpack tells me:

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

How can I include the stylesheet?

Answer 1

Lets soppouse you have declared the component as well. What you need is to specify the className as a string like this:

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

If Button is not a component, it should be "button" instead

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

If what you want is to use "inline styles", you must declare the style as a mixing, like this:

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

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