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?

Facundo La Rocca · Accepted Answer · 2017-01-05 18:41:51Z

2

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>

edited Jan 5, 2017 at 18:41

answered Jan 5, 2017 at 18:36

Facundo La Rocca

3,8862 gold badges30 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

FacundoGFlores Over a year ago

Thank you, it works, but webpack is telling me that stylesis defined but never used, how can I clean it?

Facundo La Rocca Over a year ago

change your declaration like this: import './login.css'; Mark my answer as accepted please. Thanks

Collectives™ on Stack Overflow

Loading styles in ant design ui for react components

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related