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

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

请注意您也声明了该组件。您需要将类名指定为这样的字符串：

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

如果 Button 不是一个组件，它应该是 "button" 而不是

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

如果你想使用"inline styles"，你必须将样式声明为混合，如下所示：

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

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

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

Loading styles in ant design ui for react components

css

reactjs

antd