在 ant design ui 中为反应组件加载样式

Question

我按照下一个例子：

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

组件的代码和样式表分开描述。我必须如何在 react 组件中包含 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>

如果 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>